:root { --svc-client-primary: #6A5D8B; --svc-client-ink: #2b2935; --svc-client-muted: #716d7d; --svc-client-surface: #f7f5fa; }
.svc-client { color: var(--svc-client-ink); background: linear-gradient(180deg, #faf9fd 0, #fff 260px); min-height: calc(100vh - 120px); padding: 42px 18px 68px; }
.svc-client__shell { width: min(1080px, 100%); margin: 0 auto; }
.svc-client__hero, .svc-client__page-title { max-width: 700px; margin: 0 auto 30px; text-align: center; }
.svc-client h1, .svc-client h2, .svc-client p { margin-top: 0; }
/* typography.css declares `h1, .h1, .text-h1 { font-size: var(--font-size-6xl) !important }`, so every h1
   on the site renders at 60px no matter what the page asks for — this rule's previous value (2.7rem) had
   never taken effect either. Matching !important is the narrow way to reclaim the services pages without
   touching a global that every other page depends on. At 60px a normal Arabic service name wraps to two
   lines and pushes the content a customer needs below the fold. */
/* The client account portal flips `.content-wrapper` to `direction: ltr` as a trick to place the
   account sidebar (client-account-portal-shell.css). Direction inherits, so every services screen
   laid itself out LEFT-TO-RIGHT inside an Arabic page: flex rows started from the left, and the
   primary button of a group ended up furthest from where an Arabic reader looks first.
   Re-assert the document direction on the services root. Deliberately scoped to `.svc-client` and
   not to `.services-content-section`, which finance and listings also use and which were built
   against the inherited direction — reflowing those is a separate, wider call. */
html[dir='rtl'] .svc-client { direction: rtl; }
html[dir='ltr'] .svc-client { direction: ltr; }

/* One ladder for the whole client services area, smallest that still reads as a hierarchy.
   h3 used to land at 24px — LARGER than the h2 above it — so panels shouted over their own
   sections. Sizes are fixed rather than clamped: the clamp is what made the same heading feel
   huge on a wide screen and cramped on a narrow one. */
/* `.svc-project h1` is named here rather than restated in svc-project-client.css, where it had
   drifted to 1.3rem — the same heading, one step louder, on the screen the request screen links
   out of. Every CLIENT view that loads svc-project-client.css loads this file first (Project.cshtml,
   Svc/My.cshtml, Svc/Detail.cshtml), so the project screen reads its primitives from the file that
   owns the --svc-client-* tokens it already consumes. The one exception is the provider's workspace
   in the Partner area, which loads svc-project-client.css for the approval packet alone and never
   this file — svc-approval.css re-states those four tokens on the packet's own root for it. */
.svc-client h1, .svc-project h1 { font-size: 1.25rem !important; font-weight: 800; letter-spacing: -.015em; line-height: 1.35; }
.svc-client h3 { font-size: 1rem !important; font-weight: 800; line-height: 1.35; }
/* h4 was inheriting 20px — level with the h1 and larger than the h2 above it. "اختر موعد
   الاجتماع" is a sub-heading inside a panel, so it sits below h3, not level with the page title. */
.svc-client h4 { font-size: .94rem !important; font-weight: 800; line-height: 1.35; }
/* Same story as h1 above: typography.css forces every h2 with !important, so the size has to be
   reclaimed for the services pages. 1rem, not the 1.18rem this used to carry — at 1.18rem
   محادثة الخدمة and قيّم هذه الخدمة rendered at 18.88px while رحلة الخدمة sat at 16px, so panels
   of equal rank shouted at different volumes on one page. */
.svc-client h2 { font-size: 1rem !important; font-weight: 800; line-height: 1.4; }
.svc-client p { color: var(--svc-client-muted); line-height: 1.7; }
.svc-client__eyebrow { display: inline-block; color: var(--svc-client-primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.svc-client__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 18px; }
.svc-client__card, .svc-client__panel, .svc-client__suggestions, .svc-client__request-card { border: 1px solid #e7e1ee; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(70, 53, 100, .06); }
.svc-client__card { overflow: hidden; display: flex; flex-direction: column; }
.svc-client__cover { min-height: 132px; display: grid; place-items: center; color: #fff; font-size: 2.1rem; background: radial-gradient(circle at 30% 20%, #9789bd, #6A5D8B 62%, #453b61); background-size: cover; background-position: center; }
.svc-client__cover--large { min-height: 210px; min-width: min(310px, 100%); border-radius: 18px; }
.svc-client__card-body { padding: 20px; display: flex; flex: 1; flex-direction: column; }
.svc-client__card-body p { min-height: 55px; font-size: .92rem; }
.svc-client__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
/* `.svc-project__chip` likewise: its copy carried `padding: 5px 10px`, one pixel wider on each
   side than the chip beside it on the request screen. The project screen's colour modifiers stay
   in svc-project-client.css, which loads after this file and so still wins on colour. */
.svc-client__chip, .svc-project__chip { display: inline-flex; align-items: center; width: fit-content; border-radius: var(--radius-pill); padding: 5px 9px; background: #f1eef7; color: #574a75; font-size: .76rem; font-weight: 700; }
.svc-client__chip--matching { color: #785c13; background: #fff5d5; }.svc-client__chip--active { color: #245f59; background: #ddf3ef; }.svc-client__chip--completed { color: #336b45; background: #e2f4e8; }.svc-client__chip--cancelled,.svc-client__chip--expired { color: #904044; background: #fae5e6; }
/* Every chip state the JS can emit needs its OWN colour, or "Reviewer confirmed" and
   "Reviewer assignment cancelled" render identically (2026-07-25 audit). Waiting = amber,
   settled/good = green, ended/cancelled = red, not-started/outdated = neutral grey. */
.svc-client__chip--pending,.svc-client__chip--pending_completion,.svc-client__chip--refund_pending,.svc-client__chip--meeting_required,.svc-client__chip--meeting_scheduled { color: #785c13; background: #fff5d5; }
.svc-client__chip--ready,.svc-client__chip--frozen,.svc-client__chip--done,.svc-client__chip--meeting_completed,.svc-client__chip--proposal_submitted { color: #336b45; background: #e2f4e8; }
.svc-client__chip--revoked { color: #904044; background: #fae5e6; }
/* `--retracted` joins this existing neutral group rather than getting a colour of its own: an offer
   the provider took back is not a refusal by the customer and not a lapse, so neither red chip fits.
   It reads exactly as `--replaced` does — no longer in play, nobody at fault. */
.svc-client__chip--replaced,.svc-client__chip--none,.svc-client__chip--draft,.svc-client__chip--retracted { color: #574a75; background: #ede8f6; }
/* P6: the project tag on the "my requests" row. Own rule (not folded into the line above) so a
   future restyle of "replaced/none/draft" can't silently recolour it too. */
.svc-client__chip--project { color: #574a75; background: #ede8f6; }
.svc-client--my .svc-client__my-table td .svc-client__chip--project { margin-inline-start: 6px; }
.svc-client__chip--stale { color: #8a5a12; background: #fdeccd; }
/* The one list's four words. They deliberately reuse the palette the request statuses already had —
   "choosing" wears matching's amber, "underway" wears active's teal — so a customer who has used
   this screen before reads the same colours meaning the same things. `--done` is defined above. */
.svc-client__chip--choosing { color: #785c13; background: #fff5d5; }
.svc-client__chip--underway { color: #245f59; background: #ddf3ef; }
.svc-client__chip--stopped { color: #904044; background: #fae5e6; }
/* `.svc-project__button` is named here too. Its copy stood at `min-height: 42px` — two pixels
   under the 44px touch target every other button in the client services area keeps. The project
   screen's `--secondary` modifier deliberately stays local: this one carries `margin-top: auto`
   for the card footer it sits in, which the project screen's buttons do not want. */
.svc-client__button, .svc-project__button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--svc-client-primary); border-radius: 10px; padding: 9px 18px; background: var(--svc-client-primary); color: #fff !important; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.svc-client__button:hover, .svc-project__button:hover { background: #574a75; }.svc-client__button--secondary, .svc-client__location-open { margin-top: auto; background: #fff; color: var(--svc-client-primary) !important; }
.svc-client__back, .svc-client__text-link { color: var(--svc-client-primary); font-weight: 800; text-decoration: none; }.svc-client__back { display: inline-block; margin-bottom: 20px; }
.svc-client__text-link[data-svc-file-preview], .svc-client__evidence-links [data-svc-file-preview] { border: 0; padding: 0; color: var(--svc-client-primary); background: transparent; font: inherit; font-size: .84rem; font-weight: 800; text-align: start; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }
.svc-client__text-link[data-svc-file-preview]:focus-visible, .svc-client__evidence-links [data-svc-file-preview]:focus-visible { outline: 3px solid rgba(106, 93, 139, .24); outline-offset: 3px; }
.svc-client__service-head { display: flex; align-items: center; gap: 30px; margin-bottom: 28px; }.svc-client__service-head > div:last-child { flex: 1; }
.svc-client__panel, .svc-client__suggestions { margin: 22px 0; padding: 24px; }.svc-client__suggestions { border-inline-start: 4px solid var(--svc-client-primary); }.svc-client__suggestions > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 12px; }.svc-client__suggestion { min-width: 0; border-radius: 12px; padding: 12px; background: #f1eef7; color: var(--svc-client-primary); font-weight: 700; text-decoration: none; }.svc-client__suggestion small, .svc-client__suggestion strong, .svc-client__suggestion span { display: block; overflow-wrap: anywhere; }.svc-client__suggestion small { color: var(--svc-client-muted); font-size: .72rem; }.svc-client__suggestion strong { margin-top: 3px; }.svc-client__suggestion span { margin-top: 4px; color: var(--svc-client-ink); font-size: .86rem; font-weight: 500; line-height: 1.5; }
@media (max-width: 390px) { .svc-client__panel, .svc-client__suggestions { padding: 18px; } .svc-client__suggestions > div { grid-template-columns: minmax(0, 1fr); } }
.svc-client__journey, .svc-client__timeline { list-style: none; margin: 0; padding: 0; }.svc-client__journey li, .svc-client__timeline-step { display: flex; position: relative; gap: 13px; padding-bottom: 18px; }.svc-client__journey li:not(:last-child)::before, .svc-client__timeline-step:not(:last-child)::before { position: absolute; content: ''; width: 2px; top: 31px; bottom: 1px; background: #ded7e8; inset-inline-start: 14px; }.svc-client__journey span, .svc-client__timeline-step > span { z-index: 1; display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #eee9f5; color: var(--svc-client-primary); font-size: .8rem; font-weight: 800; }.svc-client__journey small, .svc-client__timeline-step small { display: block; margin-top: 2px; color: var(--svc-client-muted); }
.svc-client__timeline-step--done > span { background: #dff3e6; color: #336b45; }.svc-client__timeline-step--active > span { background: var(--svc-client-primary); color: #fff; }.svc-client__timeline-step--locked > span { background: #eeeef1; color: #81808a; }
.svc-client__offers { margin: 28px 0; }.svc-client__offers-heading { margin-bottom: 16px; }.svc-client__offers-heading h2 { margin-bottom: 5px; }.svc-client__offers-heading p { margin-bottom: 0; }.svc-client__quotes { display: grid; gap: 16px; }.svc-client__quote { container: svc-quote-card / inline-size; overflow: hidden; border: 2px solid #e2dcec; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(70, 53, 100, .06); }.svc-client__quote--accepted { border-color: #a8d6b6; }.svc-client__quote--rejected, .svc-client__quote--retracted { opacity: .72; }.svc-client__quote--expired { border-color: #d9a4a7; background: #fffafa; }.svc-client__quote-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; }.svc-client__quote-header h3 { margin: 0; font-size: 1.18rem; font-weight: 800; }.svc-client__quote-header p { margin: 4px 0 0; font-size: .9rem; }.svc-client__quote-dates { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0 24px 18px; color: var(--svc-client-muted); font-size: .84rem; }.svc-client__quote-dates > div { display: inline-flex; align-items: baseline; gap: 6px; }.svc-client__quote-dates dt, .svc-client__quote-dates dd { margin: 0; }.svc-client__quote-dates dd { color: var(--svc-client-ink); font-weight: 700; }.svc-client__quote-table-wrap { overflow-x: auto; border-top: 1px solid #eeeaf2; border-bottom: 1px solid #eeeaf2; }.svc-client__quote-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: .9rem; }.svc-client__quote-table th, .svc-client__quote-table td { padding: 12px 16px; text-align: start; }.svc-client__quote-table th { background: #faf9fd; color: var(--svc-client-muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }.svc-client__quote-table td { border-top: 1px solid #f0edf4; }.svc-client__quote-table th:not(:first-child), .svc-client__quote-table td:not(:first-child) { text-align: end; }.svc-client__quote-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: #faf9fd; border-top: 1px solid #eeeaf2; }.svc-client__quote-total { color: var(--svc-client-primary); font-size: 1.4rem; font-weight: 900; }.svc-client__quote-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 24px 24px; }.svc-client__quote-actions .svc-client__button { min-width: 126px; min-height: 50px; margin-top: 0; font-size: 1rem; }.svc-client__chip--submitted { color: #785c13; background: #fff5d5; }.svc-client__chip--accepted { color: #336b45; background: #e2f4e8; }.svc-client__chip--rejected { color: #904044; background: #fae5e6; }
/* This rule is pinned by literal text, selector included, in client-svc-detail-regressions — so
   `.svc-project__latin-value` is NOT named here and keeps a copy of these four declarations in
   svc-project-client.css, where the reason is written down. The money primitive below carries no
   such pin and is named for both screens. */
.svc-client__latin-value { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-client__money, .svc-project__money { display: inline-flex; align-items: center; gap: 5px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.svc-client__money--symbol-first, .svc-project__money--symbol-first { direction: rtl; }
.svc-client__money .fin-currency-sar-wrap, .svc-project__money .fin-currency-sar-wrap { display: inline-flex; flex: 0 0 auto; align-items: center; color: currentColor; }
.svc-client__money .partner-buy-sar-svg, .svc-project__money .partner-buy-sar-svg { display: block; width: .85em; height: .95em; }
.svc-client__currency { direction: rtl; unicode-bidi: isolate; }
.svc-client__quote-gate { display: grid; width: 100%; max-width: none; min-width: 0; gap: 20px; box-sizing: border-box; margin: 0; border: 2px solid #ddd5e8; border-radius: 16px; padding: 24px; background: #fff; box-shadow: 0 10px 26px rgba(67, 52, 99, .08); text-align: start; }
[dir='rtl'] .svc-client__quote-gate { direction: rtl; }
[dir='ltr'] .svc-client__quote-gate { direction: ltr; }
.svc-client__quote-gate-copy { min-width: 0; }
.svc-client__quote-gate h3 { margin: 0 0 6px; color: #191638; font-size: 1.12rem; font-weight: 900; }
.svc-client__quote-gate p { margin: 0; color: var(--svc-client-muted); font-size: .9rem; line-height: 1.65; }
.svc-client__quote-gate-footer { display: grid; min-width: 0; gap: 18px; }
.svc-client__quote-gate dl { display: grid; justify-items: start; gap: 4px; min-width: 0; margin: 0; border-block: 1px solid #e6e0ec; padding-block: 15px; }
.svc-client__quote-gate dt { color: var(--svc-client-muted); font-size: .82rem; font-weight: 700; }
.svc-client__quote-gate dd { margin: 0; color: var(--svc-client-primary); font-size: 1.15rem; font-weight: 900; }
.svc-client__quote-gate .svc-client__quote-gate-action { width: 100%; min-height: 46px; margin: 0; }
@container svc-detail-workspace (max-width: 520px) { .svc-client__quote-gate { gap: 17px; padding: 18px; }.svc-client__quote-gate h3 { font-size: 1.04rem; }.svc-client__quote-gate p { font-size: .87rem; }.svc-client__quote-gate dl { gap: 12px; padding-block: 13px; }.svc-client__quote-gate dd { font-size: 1.08rem; } }
.svc-client__mock-note { margin-bottom: 18px; border-radius: 10px; padding: 11px 14px; background: #fff5d5; color: #785c13; font-weight: 700; }.svc-client__request-fields { display: grid; gap: 18px; }.svc-client__field label { display: block; margin-bottom: 7px; font-weight: 800; }.svc-client__required { color: #a63845; }.svc-client__field input:not([type='radio']):not([type='checkbox']), .svc-client__field textarea, .svc-client__field select { width: 100%; border: 1px solid #d8d2e0; border-radius: var(--radius-control); padding: 10px 12px; background: #fff; color: var(--svc-client-ink); font: inherit; }.svc-client__field.is-invalid input, .svc-client__field.is-invalid textarea, .svc-client__field.is-invalid select { border-color: #b5444e; }.svc-client__field small { display: block; margin-top: 5px; color: var(--svc-client-muted); }.svc-client__radio-group { display: flex; flex-wrap: wrap; gap: 10px; }.svc-client__radio-group label { margin: 0; border: 1px solid #ded7e8; border-radius: 8px; padding: 8px 11px; font-weight: 600; }.svc-client__location { display: flex; gap: 8px; }.svc-client__location button { border: 1px solid var(--svc-client-primary); border-radius: var(--radius-control); padding: 8px 11px; background: #fff; color: var(--svc-client-primary); font: inherit; font-weight: 800; white-space: nowrap; }
.svc-client__payment { display: grid; gap: 13px; margin-top: 14px; border: 1px solid #ded7e8; border-radius: 14px; padding: 16px; background: #faf9fd; }.svc-client__payment h3 { margin: 0; color: var(--svc-client-ink); font-size: 1rem; font-weight: 800; }.svc-client__payment p { margin: 0; font-size: .9rem; }.svc-client__payment-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-radius: 10px; padding: 11px 12px; background: #fff; color: var(--svc-client-ink); font-size: .85rem; }.svc-client__payment-amount strong { color: var(--svc-client-primary); font-size: 1.2rem; }.svc-client__payment-actions { display: flex; flex-wrap: wrap; gap: 10px; }.svc-client__payment-actions .svc-client__button { flex: 1 1 180px; }.svc-client__payment-bank { display: grid; gap: 10px; border-top: 1px solid #e3ddea; padding-top: 14px; }/* The native file input was rendering raw browser chrome — an English "Choose File / No file
   chosen" — inside an Arabic panel, on the one screen where a client is about to move six figures
   to a contractor's own bank account. The styled picker was already half-built (a <label for> and
   a filename line) and never finished, so the browser default showed through. The input is hidden
   ACCESSIBLY rather than with display:none, so it stays keyboard-reachable and the label drives it. */
.svc-client__payment-file-label { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; border: 1px solid var(--svc-client-primary); border-radius: 10px; padding: 9px 16px; background: #fff; color: var(--svc-client-primary); cursor: pointer; font-size: .9rem; font-weight: 800; }
.svc-client__payment-file-label::before { content: "\2191"; font-weight: 900; }
.svc-client__payment-file-label:hover { background: #f4f1f9; }
.svc-client__payment-bank:has(.svc-client__payment-file:focus-visible) .svc-client__payment-file-label { outline: 2px solid var(--svc-client-primary); outline-offset: 2px; }.svc-client__payment-file { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }.svc-client__payment-file-name { min-height: 20px; color: var(--svc-client-ink); font-size: .84rem; font-weight: 700; }.svc-client__payment-bank .svc-client__button { width: fit-content; }.svc-client__payment--awaiting { border-color: #e9c872; background: #fff9e7; }.svc-client__payment--awaiting h3 { color: #785c13; }
.svc-client__completion { margin-top: 14px; }.svc-client__completion--work { padding: 3px; border-radius: 13px; background: #ede8f6; }.svc-client__button--release { width: 100%; min-height: 50px; box-shadow: 0 8px 18px rgba(70, 53, 100, .18); }.svc-client__completion-banner { margin: 22px 0; border: 1px solid #a8d6b6; border-radius: 18px; padding: 18px 20px; background: #e2f4e8; color: #336b45; }.svc-client__completion-banner strong { display: block; font-size: 1.05rem; font-weight: 800; }.svc-client__completion-banner p { margin: 5px 0 0; color: inherit; }
.svc-client__completion-banner--cancelled { border-color: #d7d1df; background: #f4f2f6; color: #5d5965; }.svc-client__timeline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }.svc-client__text-link--danger { color: #9d4058; }.svc-client__text-link--danger:hover { color: #753044; }.svc-client__action-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid #ded7e8; border-radius: 18px; padding: 0; color: var(--svc-client-ink); box-shadow: 0 20px 50px rgba(42, 30, 63, .24); }.svc-client__action-dialog::backdrop { background: rgba(35, 24, 51, .45); }.svc-client__action-form { display: grid; gap: 11px; padding: 22px; }.svc-client__action-form h2, .svc-client__action-form p { margin: 0; }.svc-client__action-form h2 { font-size: 1.1rem; font-weight: 800; }.svc-client__action-form p { color: var(--svc-client-muted); font-size: .91rem; }.svc-client__action-form label { font-size: .9rem; font-weight: 800; }.svc-client__action-form textarea { width: 100%; min-height: 88px; resize: vertical; border: 1px solid #cfc6dc; border-radius: var(--radius-control); padding: 10px 11px; color: var(--svc-client-ink); font: inherit; }.svc-client__action-form textarea:focus { outline: 2px solid rgba(106, 93, 139, .3); border-color: var(--svc-client-primary); }.svc-client__action-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.svc-client__requests { display: grid; gap: 12px; }.svc-client__request-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }.svc-client__request-card h2, .svc-client__request-card p { margin-bottom: 5px; }.svc-client__request-card > div:last-child { display: grid; justify-items: end; gap: 10px; }.svc-client__empty { border: 1px dashed #cfc6dc; border-radius: 16px; padding: 40px 22px; color: var(--svc-client-muted); text-align: center; }.svc-client__empty .svc-client__button { margin-top: 18px; }.svc-client__catalog-filter { margin: 0 -18px 28px; }.svc-client__catalog-filter-inner { width: min(1240px, 100%); margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }.svc-client__catalog-search svg { position: absolute; z-index: 1; inset-inline-start: 13px; top: 50%; width: 18px; height: 18px; color: var(--svc-client-muted); transform: translateY(-50%); pointer-events: none; }.svc-client__catalog-filter-types { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; }.svc-client__filter-chip { min-height: 38px; border: 1px solid #ddd6e8; border-radius: var(--radius-pill); padding: 7px 12px; background: #fff; color: #574a75; font: inherit; font-size: .83rem; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }.svc-client__filter-chip:hover, .svc-client__filter-chip.is-active { border-color: var(--svc-client-primary); background: var(--svc-client-primary); color: #fff; }.svc-client__clear-filters { border: 0; padding: 8px; background: transparent; color: var(--svc-client-primary); font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }.svc-client__clear-filters:hover { text-decoration: underline; }.svc-client__catalog-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }.svc-client__catalog-card:hover .svc-client__catalog-cover-image { transform: scale(1.04); }.svc-client__catalog-card-body h2 { margin: 0 0 8px; color: var(--svc-client-ink); font-size: 1.13rem; line-height: 1.35; }.svc-client__catalog-description { display: -webkit-box; min-height: 48px; margin: 0; overflow: hidden; font-size: .9rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.svc-client__catalog-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 18px; }.svc-client__catalog-chips .svc-client__chip--sla { background: #ede8f6; color: #574a75; }.svc-client__catalog-chips .svc-client__chip--provider { background: #eef5ff; color: #365d86; }.svc-client__catalog-empty { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 8px; }.svc-client__catalog-empty svg { width: 44px; height: 44px; color: #8b7da6; }.svc-client__catalog-empty p { margin: 0; }
@media (max-width: 640px) { .svc-client { padding: 28px 14px 48px; }.svc-client__service-head { align-items: stretch; flex-direction: column; gap: 17px; }.svc-client__cover--large { min-height: 160px; }.svc-client__location, .svc-client__request-card { align-items: stretch; flex-direction: column; }.svc-client__request-card > div:last-child { justify-items: start; }.svc-client__location button { width: 100%; }.svc-client__radio-group { display: grid; }.svc-client__hero, .svc-client__page-title { text-align: start; } }
@media (max-width: 760px) { .svc-client__catalog-filter { margin: 0 -14px 22px; } .svc-client__request-dialog-header h2 { font-size: 18px !important; }.svc-client__catalog-filter-inner { align-items: stretch; flex-direction: column; padding: 12px 14px; }.svc-client__catalog-search { width: 100%; }.svc-client__catalog-filter-types { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 2px; }.svc-client__filter-chip { flex: 0 0 auto; }.svc-client__clear-filters { align-self: flex-start; }.svc-client__catalog-grid { grid-template-columns: 1fr; }.svc-client__catalog-card { flex-direction: column; }.svc-client__catalog-cover { flex-basis: auto; min-height: 180px; } }
.svc-client__meeting, .svc-client__work-waiting, .svc-client__work-delivered { display: grid; gap: 11px; margin-top: 14px; border: 1px solid #ded7e8; border-radius: 14px; padding: 16px; background: #faf9fd; }.svc-client__meeting h3, .svc-client__meeting p, .svc-client__work-waiting p, .svc-client__work-delivered p { margin: 0; }.svc-client__meeting-summary { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }.svc-client__meeting-summary p { color: var(--svc-client-muted); }.svc-client__meeting-range { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }.svc-client__meeting-range label { display: grid; gap: 5px; color: var(--svc-client-muted); font-size: .82rem; font-weight: 800; }.svc-client__meeting-range input { min-height: 39px; border: 1px solid #d8d2e0; border-radius: var(--radius-control); padding: 7px 9px; color: var(--svc-client-ink); background: #fff; font: inherit; }.svc-client__meeting-slots, .svc-client__evidence-links { display: flex; flex-wrap: wrap; gap: 8px; }.svc-client__meeting-slots p { color: var(--svc-client-muted); }.svc-client__slot, .svc-client__gate-button { border: 1px solid #cfc4df; border-radius: 9px; padding: 8px 10px; color: #574a75; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }.svc-client__slot:hover, .svc-client__gate-button:hover { border-color: var(--svc-client-primary); background: #ede8f6; }.svc-client__meeting-links { display: flex; flex-wrap: wrap; gap: 12px; }.svc-client__meeting-links button { border: 0; padding: 0; color: var(--svc-client-primary); background: transparent; font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; text-decoration: underline; }.svc-client__work-waiting { border-color: #e9c872; background: #fff9e7; color: #785c13; }.svc-client__work-delivered { border-color: #b9dfc5; background: #f1faf4; }.svc-client__evidence-links a { color: var(--svc-client-primary); font-size: .84rem; font-weight: 800; }.svc-client__gates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.svc-client__gate-chip { border-radius: var(--radius-pill); padding: 6px 9px; color: #336b45; background: #e2f4e8; font-size: .77rem; font-weight: 800; }
@media (max-width: 640px) { .svc-client__meeting-range { align-items: stretch; flex-direction: column; }.svc-client__meeting-range .svc-client__button { width: 100%; } }
.svc-client__prerequisite, .svc-client__runtime-panel, .svc-client__runtime-form { display: grid; gap: 12px; margin-top: 14px; border: 1px solid #ded7e8; border-radius: 14px; padding: 16px; background: #faf9fd; }.svc-client__prerequisite h2, .svc-client__prerequisite h3, .svc-client__runtime-panel h3, .svc-client__runtime-form h3, .svc-client__prerequisite p, .svc-client__runtime-panel p, .svc-client__runtime-form p { margin: 0; }.svc-client__prerequisite > label, .svc-client__prerequisite [data-svc-source-detail] > label { display:grid; gap:7px; font-weight:800; }.svc-client__prerequisite select { width:100%; border:1px solid #d8d2e0; border-radius:var(--radius-control); padding:10px 12px; color:var(--svc-client-ink); background:#fff; font:inherit; }.svc-client__runtime-state { border-radius: 10px; padding: 10px 12px; color: #574a75; background: #ede8f6; font-size: .87rem; font-weight: 700; }label.svc-client__check { display: flex; align-items: flex-start; gap: 9px; font-weight: 700; cursor: pointer; }.svc-client__check input { margin-top: 4px; }.svc-client__field-error { min-height: 18px; color: #9d4058; font-size: .82rem; font-weight: 700; }.svc-client__runtime-panel .svc-client__button, .svc-client__runtime-form .svc-client__button { width: fit-content; }.svc-client__runtime-form .svc-client__request-fields { gap: 13px; }
@media (max-width: 640px) { .svc-client__runtime-panel .svc-client__button, .svc-client__runtime-form .svc-client__button { width: 100%; }.svc-client__runtime-panel, .svc-client__runtime-form, .svc-client__prerequisite { padding: 14px; } }
.svc-client__linked-value { display: grid; gap: 4px; border: 1px solid #d8d2e0; border-radius: var(--radius-control); padding: 10px 12px; background: #f4f2f7; color: #574a75; }.svc-client__linked-value strong { font-size: .88rem; }.svc-client__linked-value span { color: var(--svc-client-ink); overflow-wrap: anywhere; }.svc-client__rating form { display: grid; gap: 13px; }.svc-client__rating fieldset { margin: 0; border: 0; padding: 0; }.svc-client__rating legend, .svc-client__rating form > label { margin-bottom: 7px; font-weight: 800; }.svc-client__rating-stars { display: flex; flex-wrap: wrap; gap: 8px; }.svc-client__rating-stars label { display: inline-flex; align-items: center; gap: 5px; min-width: 52px; border: 1px solid #d8d2e0; border-radius: 10px; padding: 8px 10px; color: #785c13; background: #fff; cursor: pointer; font-weight: 800; }.svc-client__rating-stars label:has(input:checked) { border-color: #b78b19; background: #fff5d5; }.svc-client__rating textarea { width: 100%; border: 1px solid #d8d2e0; border-radius: 9px; padding: 10px 12px; color: var(--svc-client-ink); font: inherit; resize: vertical; }.svc-client__rating .svc-client__button { width: fit-content; }.svc-client__rating-result { display: flex; align-items: center; gap: 10px; color: #9a7310; font-size: 1.25rem; font-weight: 800; }.svc-client__rating-result bdi { color: var(--svc-client-ink); font-size: .9rem; }.svc-client__suggestions--after { border-inline-start-color: #4a8a5c; }
.svc-client__timeline-actions button.svc-client__text-link { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
@media (max-width: 390px) { .svc-client__rating-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }.svc-client__rating-stars label { justify-content: center; min-width: 0; padding-inline: 5px; }.svc-client__rating .svc-client__button { width: 100%; } }

/* Client Services catalog: compact open layout matching the accepted marketplace references. */
.svc-client--catalog { overflow-x: clip; padding: 30px 18px 68px; background: #fff; }
.svc-client__catalog-shell { width: min(1180px, 100%); min-width: 0; max-width: 100%; overflow-x: clip; }
.svc-client__catalog-heading { margin: 0; border-bottom: 1px solid #e1dce7; padding: 0 0 18px; }
.svc-client__catalog-heading p { max-width: 660px; margin: 0; color: #716d7d; }
.svc-client__catalog-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 14px 0 18px; }
.svc-client__catalog-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid var(--colors-primary-500, #6a5d8b); border-radius: 7px; padding: 9px 17px; color: #fff !important; background: var(--colors-primary-500, #6a5d8b); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.svc-client__catalog-action svg { flex: 0 0 20px; width: 20px; height: 20px; }
.svc-client__catalog-action:hover, .svc-client__catalog-action:focus-visible { border-color: var(--colors-primary-600, #372a58); color: #fff !important; background: var(--colors-primary-600, #372a58); box-shadow: 0 0 0 3px rgba(106, 93, 139, .16); outline: none; }
.svc-client__catalog-search { position: relative; display: block; flex: none; width: 100%; min-width: 0; max-width: 100%; margin: 0 0 26px; }
.svc-client__catalog-search > .svc-client__catalog-search-icon { position: absolute; z-index: 1; inset-inline-start: 16px; top: 50%; width: 20px; height: 20px; color: #81778f; transform: translateY(-50%); pointer-events: none; }
.svc-client__catalog-search input { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 50px; border: 1px solid #a99abb; border-radius: var(--radius-control); padding: 10px 48px 10px 46px; padding-inline-start: 46px; padding-inline-end: 48px; color: var(--svc-client-ink); background: #fff; box-shadow: none; font: inherit; font-size: 15px; outline: none; }
.svc-client[dir="rtl"] .svc-client__catalog-search input { padding: 10px 48px 10px 46px; padding-inline-start: 46px; padding-inline-end: 48px; }
.svc-client__catalog-search input:focus { border-color: #6a5d8b; box-shadow: 0 0 0 3px rgba(106, 93, 139, .13); }
.svc-client__catalog-clear { position: absolute; z-index: 2; inset-inline-end: 10px; top: 50%; display: grid; width: 32px; height: 32px; border: 0; border-radius: 50%; padding: 0; place-items: center; color: #71657f; background: transparent; cursor: pointer; transform: translateY(-50%); }
.svc-client__catalog-clear[hidden] { display: none; }
/* MEASURED 1.12:1. This button has no border and no background at rest; hover and focus shared one
   rule whose only visible effect was a #f3f1f7 fill on the white input — 1.12:1 against that white,
   where a focus indicator needs 3.0:1. `outline: none` then removed the browser's own ring, so the
   clear button was effectively unfindable by keyboard. The two states are now separate rules: hover
   keeps exactly the fill it always had (a mouse user sees no change at all), and focus adds the
   platform-purple ring — #6A5D8B on #f3f1f7 measures 5.28:1. */
.svc-client__catalog-clear:hover, .svc-client__catalog-clear:focus-visible { color: #4f174e; background: #f3f1f7; }
.svc-client__catalog-clear:focus-visible { outline: 2px solid #6a5d8b; outline-offset: 2px; }
.svc-client__catalog-clear svg { position: static; width: 17px; height: 17px; color: inherit; transform: none; pointer-events: none; }
.svc-client__catalog-results { min-width: 0; max-width: 100%; }
.svc-client__catalog-loading { display: grid; min-height: 170px; border: 1px dashed #cfc6dc; border-radius: 14px; place-items: center; color: var(--svc-client-muted); font-size: 14px; font-weight: 700; }
.svc-client__catalog-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; align-items: stretch; gap: 20px; }
.svc-client__catalog-card { display: flex; grid-column: span 2; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; border: 1px solid #d8d0df; border-radius: 12px; background: #fbf9fe; box-shadow: 0 5px 16px rgba(57, 37, 91, .07); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.svc-client__catalog-card:only-child { grid-column: 3 / span 2; }
.svc-client__catalog-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.svc-client__catalog-card:hover, .svc-client__catalog-card:focus-within { border-color: #a99abb; box-shadow: 0 10px 24px rgba(57, 37, 91, .12); transform: translateY(-2px); }
.svc-client__catalog-cover { position: relative; display: grid; isolation: isolate; flex: none; width: 100%; min-height: 0; aspect-ratio: 3 / 2; overflow: hidden; place-items: center; background: linear-gradient(145deg, #f4f1f8, #e9e2f1); color: #837498; }
.svc-client__catalog-cover-image { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.svc-client__catalog-cover-fallback { position: absolute; z-index: 0; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; }
.svc-client__catalog-cover-fallback svg { width: 38px; height: 38px; }
.svc-client__catalog-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 16px; text-align: center; }
.svc-client__catalog-description { display: -webkit-box; min-height: 4.35em; margin: 0; overflow: hidden; color: var(--svc-client-muted); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.svc-client__catalog-response-time { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 23px; margin: 13px 0 15px; border-top: 1px dashed #ded8e4; padding-top: 11px; color: #786f89; font-weight: 600; }
.svc-client__catalog-response-time svg { flex: 0 0 20px; width: 20px; height: 20px; }
.svc-client__catalog-cta { width: 100%; min-height: 44px; margin-top: 18px; border-color: var(--colors-primary-500, #6a5d8b); border-radius: 7px; color: #fff; background: var(--colors-primary-500, #6a5d8b); text-decoration: none; }
.svc-client__catalog-cta:hover, .svc-client__catalog-cta:focus-visible { border-color: var(--colors-primary-600, #372a58); color: #fff; background: var(--colors-primary-600, #372a58); box-shadow: 0 0 0 3px rgba(106, 93, 139, .13); outline: none; }
.svc-client__catalog-empty { min-height: 180px; }
.svc-client__catalog-empty .svc-client__button { margin-top: 8px; }
/* Estimator (building-cost-calculator-spec.md §5). It is NOT its own component: the dialog IS the
   platform's request dialog — same .svc-client__request-dialog shell and ::backdrop, same header bar
   and close button, same .svc-client__field / .svc-client__radio-group / .svc-client__check /
   .svc-client__button controls, same sticky .svc-client__request-actions footer as the request wizard
   on this same page. Twelve of the eighteen private classes went when that inheritance replaced them
   (modal, panel, close, intro, form, checks, submit, total, range-label, per-sqm, cta, recalculate).
   Six survive below, plus two new ones, and only for what the estimator alone has: the scrolling
   body, the money headline and the range inside it, the result stack, the breakdown disclosure and
   its list, the disclaimer, and a form-level error banner the platform has no shared shape for. */
/* THE SHEET IS AS TALL AS WHAT IS IN IT, AT EVERY WIDTH, CAPPED AT THE SCREEN.
   A modal <dialog> is laid out against inset-block: 0, so the UA's `height: fit-content` is the only
   thing keeping it the size of what it holds; .svc-client__request-dialog replaces that with
   `height: auto`, which resolves against top/bottom and pins EVERY instance at the full available
   height — and the mobile block below then pinned it at 100dvh outright. That is the root of three
   rounds of gap-patching: a sheet claiming the whole viewport whatever is in it has to be told,
   separately, where inside itself the action bar should sit, and every answer to that is wrong for
   some other state. Measured at 375×812, Arabic: the opening form (one question) left 602px of white
   under «تابع», and a form full of answers pinned the bar to the bottom edge with 269px of white
   above it. Neither hole can exist once the sheet stops claiming height it is not using — a pane
   exactly as tall as its content has no interior free space to distribute, so there is nothing left
   for a fill rule to do (see svc-client.js, where the measurement that used to decide this is gone).
   Estimator-scoped rather than platform-wide: the request wizard on this same page keeps the
   full-screen sheet it shipped with, because a wizard that resizes between steps is the Projects
   stream's call, not this packet's. `dialog` + the attribute (0-2-1) is what outranks the mobile
   `.svc-client__request-dialog { height: 100dvh }` below with no media query of its own — a media
   query adds no specificity, so one unconditional rule now covers both widths where two used to. */
dialog.svc-client__request-dialog[data-svc-estimator-modal] { height: fit-content; }
.svc-client__catalog-estimator-body { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 0; background: #fff; }
/* The intro is instructions for the form ("enter your land details to get an estimate"), so once the
   answer is on screen it is 46px of dead height between the header and the money — on a phone that
   is the difference between the CTA being visible and being one scroll down. Dropped in CSS rather
   than by toggling `hidden` in JS so it stays the dialog's aria-describedby target: the accname
   algorithm reads elements referenced by aria-describedby even when they are not rendered, and the
   description is re-shown intact the moment «تعديل البيانات» brings the form back. `:has()` is
   already a load-bearing dependency on this surface (the checked-option chip style below). */
.svc-client__catalog-estimator-body:has(> [data-svc-estimator-result]:not([hidden])) > .svc-client__request-intro { display: none; }
/* 44px, the iOS HIG minimum, on the one control here that was under it: the shared header's close
   button is 38px square. Every other target on this surface already clears 44 (.svc-client__radio-group
   label sets min-height: 44px, which the ملحق/قبو checkboxes inherit because they now sit inside a
   group, and the action-bar buttons are taller still). Scoped to the estimator rather than fixed on
   .svc-client__request-dialog-header, because that header is the request wizard's too and its height
   is the Projects stream's to change — flagged, not taken. */
[data-svc-estimator-modal] .svc-client__request-dialog-header button { flex-basis: 44px; width: 44px; height: 44px; }
.svc-client__catalog-estimator-error { margin-top: 12px; border: 1px solid #f0c4c8; border-radius: 10px; padding: 10px 12px; background: #fae5e6; color: #904044; font-size: .86rem; font-weight: 700; }
/* NEITHER PANE GROWS, AND NOTHING MEASURES WHETHER IT SHOULD. Both panes did, once, behind a
   `--fill` modifier that applyEstimatorPaneFill added after comparing the pane's natural height to
   the sheet's; the growth was there so `margin-top: auto` on the action bar could push it to the
   bottom edge. Both halves are gone with the fixed-height sheet that created the question — the rule
   above makes the sheet the height of this pane, so the pane can never have free space to grow into
   and the bar can never have free space to be pushed through. The bar lands directly under the
   content in every state, and the bottom edge it used to be pushed to is now the SHEET's bottom edge,
   which the mobile block below hangs on the phone's. Nothing left here decides anything.
   `flex: 0 0 auto` stays, and is not part of that mechanism: the scroller is a flex column, so
   without `flex-shrink: 0` a pane taller than the sheet would be squeezed instead of scrolled and its
   own children would overlap. The bar keeps `position: sticky; bottom: 0` for the same reason it
   always had it — on a pane that genuinely overflows (a compound result with its breakdown open) the
   CTA has to stay on screen at every scroll position. */
.svc-client__catalog-estimator-body > form { display: flex; flex: 0 0 auto; flex-direction: column; }
.svc-client__catalog-estimator-result { display: flex; flex: 0 0 auto; flex-direction: column; gap: 14px; }
/* The `hidden` attribute alone does not win against an explicit `display` declaration (author CSS
   always beats the UA stylesheet's `[hidden] { display: none }`, regardless of specificity) — without
   this, toggling `.hidden = true` leaves the pane rendered and the other one stacked under it. Both
   panes declare a display, so both need the guard. */
.svc-client__catalog-estimator-body > form[hidden], .svc-client__catalog-estimator-result[hidden] { display: none; }
/* The answer, first and whole: range + total area + cost per m² in one block, so the number the
   visitor came for is on screen the moment the result renders instead of under a seven-row list. */
.svc-client__catalog-estimator-headline { display: grid; gap: 7px; border: 1px solid #ded7e8; border-radius: 14px; padding: 15px 18px; background: #faf9fd; text-align: center; }
.svc-client__catalog-estimator-headline > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.svc-client__catalog-estimator-headline > header strong { color: var(--svc-client-muted); font-size: .9rem; font-weight: 700; }
.svc-client__catalog-estimator-headline > header span { display: inline-flex; align-items: baseline; gap: 5px; border-radius: var(--radius-pill); padding: 4px 11px; color: #4f416e; background: #ede8f6; font-size: .82rem; font-weight: 700; }
.svc-client__catalog-estimator-headline > header bdi { color: var(--svc-client-ink); font-weight: 800; }
.svc-client__catalog-estimator-headline > footer { color: var(--svc-client-muted); font-size: .9rem; font-weight: 700; }
/* !important, and the child rule with it, for the reason already recorded above the request dialog's
   own h2: typography.css declares `p, p * { font-size: …; font-weight: … !important }` site-wide, and
   the range is a <p> with a <bdi> and a currency <span> inside it. Without this the spec's «the
   range, LARGE» rendered at 16px/400 in muted grey — the same size and colour as the disclaimer under
   it, and lighter than the cost-per-m² line beneath, so the one number the visitor opened the
   calculator for was the least prominent thing in the result. That was true of the previous layout
   too; the declaration was there all along and never applied. `.svc-client p` (0,1,1) also outranked
   the old single-class colour rule, hence colour is pinned here as well. */
.svc-client__catalog-estimator-range { margin: 0; color: var(--svc-client-primary) !important; font-size: 1.7rem !important; font-weight: 900 !important; line-height: 1.2; }
.svc-client__catalog-estimator-range bdi, .svc-client__catalog-estimator-range span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
/* Proof, one click away. Closed it is a single row, which is what keeps the money and the CTA on the
   same screen on a phone; open it is the same seven rows it always was. */
.svc-client__catalog-estimator-breakdown { border: 1px solid #ded7e8; border-radius: 12px; background: #fff; }
.svc-client__catalog-estimator-breakdown > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; border-radius: 12px; padding: 9px 14px; color: var(--svc-client-ink); font-weight: 800; list-style: none; cursor: pointer; }
.svc-client__catalog-estimator-breakdown > summary::-webkit-details-marker { display: none; }
.svc-client__catalog-estimator-breakdown > summary::after { content: '⌄'; color: var(--svc-client-muted); font-size: 1.15rem; line-height: 1; }
.svc-client__catalog-estimator-breakdown > summary:hover { background: #faf9fd; }
.svc-client__catalog-estimator-breakdown > summary:focus-visible { outline: 2px solid var(--svc-client-primary); outline-offset: 2px; }
.svc-client__catalog-estimator-breakdown[open] > summary { border-bottom: 1px solid #ece7f2; border-end-start-radius: 0; border-end-end-radius: 0; }
.svc-client__catalog-estimator-breakdown[open] > summary::after { content: '⌃'; }
.svc-client__catalog-estimator-breakdown-list { display: grid; gap: 8px; margin: 0; padding: 12px 14px; list-style: none; }
.svc-client__catalog-estimator-breakdown-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--svc-client-muted); font-size: .88rem; }
.svc-client__catalog-estimator-breakdown-list li bdi { color: var(--svc-client-ink); font-weight: 700; }
/* A row the API priced leads with the money and keeps the quantity underneath as the caption saying what
   was measured to get there — the compound's units line and its shared-works line are the whole reason a
   compound answer is worth more than one number, so each has to read as its own amount rather than as two
   areas the visitor is left to multiply. `display: block` because the <li> is a baseline-aligned flex row:
   inline, the caption would sit beside the label and drag the money off its own line. */
.svc-client__catalog-estimator-breakdown-qty { display: block; margin-top: 2px; color: var(--svc-client-muted); font-size: .78rem; font-weight: 500; }
.svc-client__catalog-estimator-breakdown-qty bdi { color: inherit !important; font-weight: inherit !important; }
/* !important for the same reason as the range above, and it matters here for height rather than for
   emphasis: the disclaimer is a <p>, so typography.css's `p { font-size: 16px !important }` (14px
   below 768px) was winning and the .82rem declared here had never once applied. At 14px/1.625 the
   Arabic sentence wraps to three lines on a 375px screen instead of two — ~25px of the result's
   height budget, spent on the one line nobody opened the calculator to read. */
.svc-client__catalog-estimator-disclaimer { margin: 0; border-radius: 10px; padding: 11px 13px; color: var(--svc-client-muted); background: var(--svc-client-surface); font-size: .82rem !important; line-height: 1.55 !important; }
/* Every select on this form, for the one reason: the shared field styles give it 10px of padding and
   nothing else, which lands at ~41px — under the 44px every other target here clears. Scoped to the
   estimator body rather than to a row wrapper, because there is no row wrapper any more: the build-type
   picker, the unit-type picker and the floors select are each their own row now. */
.svc-client__catalog-estimator-body select { min-height: 44px; }
/* `hidden` loses to an author `display` here for the same reason the two result panes above needed the
   same guard: the group declares grid and the option declares flex, and the UA's `[hidden]` rule cannot
   outrank either. Both are now toggled per build type, so a question the chosen type never asked would
   otherwise stay on screen — and, worse, stay answerable. */
.svc-client__radio-group[hidden], .svc-client__radio-group label[hidden] { display: none; }
/* The no-number answer, for a type the calculator will not price. Same card geometry as the money
   headline above, on purpose: it is the same KIND of thing — a result — and pointedly not
   .svc-client__catalog-estimator-error, which is red and means something went wrong. Nothing went wrong
   here. !important on the <p> for the reason every paragraph on this surface needs it: typography.css
   pins `p, p *` site-wide and again at 14px under 768px. */
/* `margin-block: auto` dates from the phone sheet being 100dvh whatever was in it: this pane is SHORT,
   so left flush to the top the answer sat under the header with ~340px of blank white below it, and the
   auto margins split that free space so the message landed about a third down instead of clinging to
   the header. It was already a no-op on desktop, where the dialog is height: fit-content — and it is a
   no-op on the phone too now that the sheet is fit-content at every width: an auto margin absorbs free
   space, and a pane exactly as tall as its content has none. Kept rather than dropped because the
   outcome it was protecting (a routed answer whose two buttons sit on the bottom edge, unconditionally,
   never floating mid-sheet) is a pinned promise; the short bottom-anchored sheet now delivers that by
   construction. Delete it and nothing moves — verified at 375×550 and 375×812. */
.svc-client__catalog-estimator-route { display: grid; gap: 9px; margin-block: auto; border: 1px solid #ded7e8; border-radius: 14px; padding: 16px 18px; justify-items: center; background: #faf9fd; text-align: center; }
.svc-client__catalog-estimator-route-type { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 4px 12px; color: #4f416e; background: #ede8f6; font-size: .82rem; font-weight: 800; }
.svc-client__catalog-estimator-route strong { color: var(--svc-client-ink); font-size: 1.05rem; font-weight: 800; line-height: 1.45; }
.svc-client__catalog-estimator-route p { margin: 0; color: var(--svc-client-muted); font-size: .84rem !important; font-weight: 500 !important; line-height: 1.55 !important; }
/* "There is nowhere to send this yet" — appended above the sticky footer when the CTA finds no published
   service at all. Deliberately NOT the red error banner: nothing failed and the estimate above it is
   correct, so this reads as the amber statement it is. Carries the same !important on font-size and
   line-height as the disclaimer directly above it, for the same reason: typography.css's global
   `p { font-size: 16px !important }` wins over a plain declaration. */
.svc-client__catalog-estimator-unavailable { margin: 0; border: 1px solid #e8d8a8; border-radius: 10px; padding: 11px 13px; color: #6b5320; background: #fdf8e9; font-size: .84rem !important; font-weight: 500 !important; line-height: 1.55 !important; }
body.svc-client-catalog-modal-open { overflow: hidden; }

.svc-client__request-dialog { width: min(720px, calc(100vw - 28px)); max-width: 720px; height: auto; max-height: 90dvh; overflow: hidden; margin: auto; border: 1px solid var(--colors-primary-200, #c3bed1); border-radius: 16px; padding: 0; color: var(--svc-client-ink); background: #fff; box-shadow: 0 24px 64px rgba(42, 30, 63, .3); }
.svc-client__request-dialog::backdrop { background: rgba(35, 24, 51, .52); }
.svc-client__request-dialog-layout { display: flex; flex-direction: column; max-height: 90dvh; overflow: hidden; }
.svc-client__request-dialog-header { z-index: 2; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e7e1ee; padding: 12px 14px; background: #fff; }
/* !important because the request dialog is a SIBLING of .svc-client, not a child — the services
   ladder never reaches it, so typography.css's global 36px h2 was winning and the form title was
   the biggest text on the screen. The 20px was declared here all along and never applied. */
.svc-client__request-dialog-header h2 { margin: 0; color: var(--svc-client-ink); font-size: 1.25rem !important; font-weight: 800; line-height: 1.25; }
.svc-client__request-dialog-header button { display: grid; flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; padding: 0; place-items: center; color: var(--svc-client-primary); background: transparent; font: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.svc-client__request-dialog-header button:hover, .svc-client__request-dialog-header button:focus-visible { background: var(--colors-primary-50, #f3f2f6); outline: 2px solid var(--colors-primary-300, #a69eb9); }
.svc-client--request-embed { flex: 1 1 auto; min-height: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: #fff; }
.svc-client--request-embed .svc-client__shell { width: min(820px, 100%); min-width: 0; }
.svc-client__request-intro { margin: 0 0 14px; overflow-wrap: anywhere; }
.svc-client__request-form, .svc-client__request-form * { box-sizing: border-box; max-width: 100%; }
.svc-client__request-submit { margin-top: 12px; }
.svc-client--request-embed .svc-client__request-submit { position: sticky; z-index: 1; bottom: 0; width: 100%; box-shadow: 0 -8px 18px rgba(255, 255, 255, .96); }

/* Canonical shared Client request form. */
.svc-client__request-form { width: 100%; margin: 0; overflow: visible; border: 1px solid #e2dce9; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(70, 53, 100, .06); }
.svc-client__request-heading { display: flex; max-width: none; align-items: center; justify-content: space-between; gap: 12px; margin: 0; border-bottom: 1px solid #eee9f2; padding: 12px 14px; text-align: start; }
.svc-client__request-heading h1 { margin: 0; color: #191638; font-size: 20px; line-height: 1.25; }
.svc-client__request-heading > a { display: grid; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; place-items: center; color: var(--svc-client-primary); text-decoration: none; font-size: 1.7rem; line-height: 1; }
.svc-client__request-heading > a:hover, .svc-client__request-heading > a:focus-visible { background: #f3f2f6; outline: 2px solid #a69eb9; }
.svc-client__request-body { padding: 0 14px; }
.svc-client__request-section, .svc-client__prerequisite, .svc-client__rfp, .svc-client__request-review { margin: 0; padding: 12px 0; }
.svc-client__request-section + .svc-client__rfp, .svc-client__prerequisite + .svc-client__request-section, .svc-client__request-review .svc-client__review-section + .svc-client__review-section { border-top: 1px solid #eee9f2; }
.svc-client__request-section > header, .svc-client__request-review > header { margin-bottom: 10px; }
.svc-client__request-section > header h2, .svc-client__request-review > header h2 { margin: 0 0 4px; color: #191638; font-size: 1.08rem; }
.svc-client__request-section > header p, .svc-client__request-review > header p { margin: 0; font-size: .88rem; line-height: 1.45; }
.svc-client__request-fields { gap: 12px; }
.svc-client__field[hidden] { display: none !important; }
.svc-client__field > label { color: #29233b; font-size: .9rem; }
.svc-client__field input:not([type='radio']):not([type='checkbox']):focus, .svc-client__field textarea:focus, .svc-client__field select:focus { border-color: var(--svc-client-primary); outline: 0; box-shadow: 0 0 0 3px rgba(106, 93, 139, .13); }
.svc-client__field textarea { min-height: 88px; resize: vertical; }
.svc-client__radio-group { align-items: stretch; }
.svc-client__radio-group label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.svc-client__radio-group label:has(input:checked) { border-color: var(--svc-client-primary); color: #4f416e; background: #f3f0f8; box-shadow: inset 0 0 0 1px var(--svc-client-primary); }
.svc-client__radio-group--binary label { flex: 1 1 150px; justify-content: center; }
/* Every option the same width. Plain flex sizes each chip to its own text, so "دور واحد" came out
   wider than "دورين" and "تسليم مفتاح" wider than "تشطيب" — a set of equal choices read as a ranked
   one. Equal grid columns is the device the 5-star row below already uses at 390px, generalised: it
   holds at every width and for any option count, and the label text wraps inside its own chip
   instead of the row going ragged. Deliberately overrides the 640px `display: grid` stack above
   (later in the file, equal specificity) — two or three short chips across read better on a phone
   than three full-width rows. */
.svc-client__radio-group--even { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.svc-client__radio-group--even label { justify-content: center; gap: 6px; padding-inline: 6px; text-align: center; }
/* FOUR options across, ON A NARROW ROW. A quarter of a 375px row leaves ~51px of text beside the radio
   glyph — enough for «تسليم مفتاح» to wrap at its space, not enough for "Renovation", which has no space
   to break at and ran straight out of its chip. Stacking the glyph ABOVE the label hands the text the
   chip's full width (~70px), which fits every option in both languages on one line — and the result is
   SHORTER than the two-line row it replaces, so the fourth option costs nothing in height and no word
   has to be chosen for its pixel width. Four-up only: two and three options have width to spare and
   read better inline.
   NOW WIDTH-SCOPED, which it deliberately was not before: the reason given for applying it everywhere
   was that the desktop column was ~340px, the same quarter and the same problem. That column is gone —
   the form is one full-width column at every width (see --stacked below), so a quad chip on the 720px
   sheet gets ~166px and holds glyph and label inline with room to spare. Stacked at that width it was
   the only row on the form whose glyph did not sit beside its word, and ~16px taller than it needed to
   be, on a layout whose one risk is height. The declaration itself now lives in the estimator's own
   @media (max-width: 640px) block further down — its phone breakpoint, reused so there is one width
   story on this surface rather than two — and NOT here as an unconditional rule with a narrow-width
   override, because the two would have equal specificity and whichever came last in the file would
   silently decide it. */
/* And a hard guard for every option in every group: a label may wrap and may break, but must never
   paint outside the control it names — the failure mode a longer translation reaches first. */
.svc-client__radio-group label > span { min-width: 0; overflow-wrap: break-word; }
/* Two groups inside one .svc-client__field. The estimator no longer does this — ملحق/قبو/مسبح have
   their own «إضافات» field now — but the rule is the shared one and a second group under a first is
   still 8px apart wherever the platform draws one. */
.svc-client__radio-group + .svc-client__radio-group { margin-top: 8px; }
.svc-client__radio-group .svc-client__check { font-weight: 600; }
.svc-client__radio-group .svc-client__check input { margin-top: 0; }
/* Same chip, quieter — and now the second half of a two-part answer to the same question. ملحق/قبو
   used to sit directly under دور واحد/دورين inside the SAME field at the same size with the same
   border, so the only thing telling them apart was the input glyph (circle vs square), easy to
   misread as two more floor options. The real fix was the missing caption, which this rule could not
   supply: they are their own labelled row now. These muted tokens stay because they still carry the
   rest of the distinction — an EXTRA is optional and additive, a floor count or a finish grade is a
   choice the form requires — so the row reads as add-ons at a glance rather than as a fourth
   equally-weighted question. Checked state is deliberately left to the shared
   label:has(input:checked) rule above (higher specificity, still wins): a ticked ملحق lights up the
   exact primary purple every other selected chip does; only the resting scan state is toned down. */
.svc-client__radio-group--modifiers label { border-color: #ece7f2; color: var(--svc-client-muted); background: var(--svc-client-surface); }
.svc-client__radio-group--modifiers .svc-client__check { font-weight: 500; }
/* ONE QUESTION PER ROW — the whole layout, in one declaration. This modifier replaces a two-column
   one, a repeat(2, …) grid that collapsed to a single column at 640px, and the owner's complaint is
   what it cost: on an RTL page a two-column form reads right→left→down→right→left, so «ما الذي تريد بناءه؟»
   sat beside «مساحة الأرض» and «عدد الأدوار» beside «نوع العمل» as if each pair were one question,
   and the last row left «مستوى التشطيب» alone against dead white space. A single column reads in one
   direction in both languages and needs no media query to do it — the 640px override that used to
   flip the columns is gone, and only the gap changes by width now.
   The height this costs is bought back in the gap (12px, the platform's own .svc-client__request-fields
   rhythm on this surface, against the old 14px row gap — 10px on a phone) and by the two wrappers this
   replaced: the paired lead row and the per-type number row were each spending a grid row gap of their
   own on top of their contents' spacing. Measured at 1280×900, Arabic, form pane against the space the
   sheet gives it: villa 645px of 645, warehouse 675 of 675, infrastructure 393 of 393 — every one of
   them exactly on the fold — and the compound, the tallest form this sheet can produce at seven
   questions, 759 of 741. Eighteen pixels of scroll on the one worst case, on the shortest desktop
   window worth measuring, with the CTA sticky through it. That is the price of reading in one
   direction and it was accepted rather than clawed back by shaving a hint or a heading off the form.
   `minmax(0, 1fr)` and not `1fr`: a grid column's default `min-width: auto` is its content's minimum,
   so a long unbroken option label would push the column — and the sheet — wider than the viewport.
   Explicit rather than inherited from .svc-client__request-fields's bare `display: grid` (which is
   already single-column) because the estimator owns this decision; the wizard sharing the base class
   must not silently acquire or lose it. */
.svc-client__request-fields--stacked { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
.svc-client__multi { position: relative; display: grid; gap: 8px; }
.svc-client__multi-trigger { min-height: 44px; border: 1px solid #d8d2e0; border-radius: 10px; padding: 9px 38px 9px 12px; color: var(--svc-client-ink); background: #fff; font: inherit; text-align: start; cursor: pointer; }
.svc-client[dir='rtl'] .svc-client__multi-trigger { padding: 9px 12px 9px 38px; }
.svc-client__multi-trigger::after { position: absolute; inset-inline-end: 14px; content: '⌄'; color: var(--svc-client-muted); }
.svc-client__multi-panel { z-index: 6; display: grid; max-height: 260px; overflow: auto; border: 1px solid #d8d2e0; border-radius: 10px; padding: 8px; background: #fff; box-shadow: 0 12px 28px rgba(42, 30, 63, .14); }
.svc-client__multi-panel[hidden] { display: none; }
.svc-client__multi-panel > input { position: sticky; z-index: 1; top: 0; margin-bottom: 6px; background: #fff; }
.svc-client__multi-panel > label { display: flex; align-items: center; gap: 8px; min-height: 40px; border-radius: 7px; padding: 7px 9px; cursor: pointer; }
.svc-client__multi-panel > label:hover, .svc-client__multi-panel > label:has(input:checked) { background: #f3f0f8; }
.svc-client__multi-panel > small { padding: 10px; color: var(--svc-client-muted); text-align: center; }
.svc-client__multi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-client__multi-chips:empty { display: none; }
.svc-client__multi-chips > span { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill); padding: 5px 8px 5px 10px; color: #4f416e; background: #f0ecf6; font-size: .82rem; font-weight: 700; }
.svc-client[dir='rtl'] .svc-client__multi-chips > span { padding: 5px 10px 5px 8px; }
.svc-client__multi-chips button { display: grid; width: 20px; height: 20px; border: 0; border-radius: 50%; padding: 0; place-items: center; color: #6a5d8b; background: transparent; font: inherit; cursor: pointer; }
/* MEASURED 1.20:1. Same shape of defect as the clear button above: a 20px borderless X inside a
   chip, hover and focus sharing one rule, and the only signal a #ded7e8 fill on the chip's own
   #f0ecf6 — 1.20:1, against a 3.0:1 bar. Split so hover is byte-for-byte what it was; focus gets the
   purple ring, 4.22:1 on that fill. The chip does not clip, so the 2px offset has room. */
.svc-client__multi-chips button:hover, .svc-client__multi-chips button:focus-visible { background: #ded7e8; }
.svc-client__multi-chips button:focus-visible { outline: 2px solid #6a5d8b; outline-offset: 2px; }
.svc-client__upload { position: relative; }
.svc-client__upload, .svc-client__upload [data-intake-upload-state], .svc-client__upload [data-svc-upload-state] { display: grid; min-width: 0; width: 100%; gap: 10px; }
.svc-client__upload > input[type='file'] { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px !important; height: 1px; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.svc-client__upload-trigger { display: inline-flex !important; width: fit-content; min-height: 44px; align-items: center; margin: 0 !important; border: 1px dashed #9f91b3; border-radius: 10px; padding: 9px 16px; color: var(--svc-client-primary); background: #faf9fc; cursor: pointer; }
.svc-client__upload-trigger:hover, .svc-client__upload:focus-within .svc-client__upload-trigger { border-color: var(--svc-client-primary); background: #f4f1f8; outline: 2px solid rgba(106, 93, 139, .28); outline-offset: 2px; }
.svc-client__upload-item { display: grid; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; grid-template-columns: 42px minmax(0, 1fr) max-content; align-items: center; gap: 10px; overflow: hidden; border: 1px solid #e2dce9; border-radius: 10px; padding: 8px 10px; }
.svc-client__upload-item img { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; }
.svc-client__upload-file-icon { display: grid; width: 42px; height: 42px; border-radius: 7px; place-items: center; color: var(--svc-client-primary); background: #f1edf6; font-size: 1.2rem; }
.svc-client__upload-file-name { display: block; min-width: 0; overflow: hidden; color: var(--svc-client-ink); direction: ltr; text-align: start; text-overflow: ellipsis; unicode-bidi: isolate; white-space: nowrap; }
.svc-client__upload-item button { min-width: max-content; border: 0; padding: 5px 7px; color: #9d4058; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; line-height: 1.25; white-space: nowrap; cursor: pointer; }
.svc-client__upload-progress { display: inline-flex; align-items: center; gap: 8px; color: var(--svc-client-muted); font-size: .86rem; }
.svc-client__upload-progress > span { width: 17px; height: 17px; border: 2px solid #d7d0e1; border-top-color: var(--svc-client-primary); border-radius: 50%; animation: svc-request-spin .8s linear infinite; }
@keyframes svc-request-spin { to { transform: rotate(360deg); } }
.svc-client__location-picker { display: grid; gap: 10px; }
/* THE LOUDEST CONTROL ON THE FORM WAS NOT THE ONE THAT SUBMITS IT. This button opens a map so the
   customer can drop a pin on one optional field; it was drawn as a full-width, solid-primary,
   800-weight slab — the exact treatment `.svc-client__button` gives the button that creates the
   project — and it sat a screen and a half above that button, out-shouting it. Demoted to the
   SECONDARY treatment already used by «إلغاء» in the same dialog and by every other step-back
   control in this journey: `.svc-client__button--secondary` is white with a primary border and
   primary text. Named on that rule rather than given a copy, so the two cannot drift; what stays
   local is only what is genuinely this control's own — it is a block-level opener, so it keeps its
   full width and its 44px target, and it must not inherit `--secondary`'s `margin-top: auto`
   inside the picker's grid. Both intake surfaces (the service request form in svc-client.js and
   the project intake in svc-project-client.js) render this exact class, so the demotion lands on
   both from one rule, which is the point: the two forms must ask in the identical way. */
.svc-client__location-open { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin-top: 0; border: 1px solid var(--svc-client-primary); border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.svc-client__location-open[hidden] { display: none; }
.svc-client__location-dialog { width: min(640px, calc(100vw - 32px)); max-width: 640px; height: min(640px, 80dvh); max-height: 80dvh; overflow: hidden; margin: auto; border: 1px solid #c3bed1; border-radius: 16px; padding: 0; color: var(--svc-client-ink); background: #fff; box-shadow: 0 24px 64px rgba(42, 30, 63, .3); }
.svc-client__location-dialog::backdrop { background: rgba(35, 24, 51, .56); }
/* THE SHEET, AND THE SEVENTEEN DIALOGS THAT NOW USE IT.
   `.svc-project__dialog-form` is named on all four structural rules below (and on the footer rule
   further down) rather than given a copy of them, the same move this area makes everywhere else —
   see the note at `.svc-project__chip`. The project dialogs used to be a plain 24px-padded grid
   with a bare heading and no way out but Escape, while the map picker they OPEN had this proper
   title bar and sticky action bar; the child was better built than the parent. One selector list,
   and they are the same window. Nothing here changed for the location sheet itself. */
.svc-client__location-sheet, .svc-project__dialog-form { display: flex; min-height: 0; flex-direction: column; }
/* `height: 100%` belongs to the location sheet ALONE. Its dialog has a definite height
   (`.svc-client__location-dialog` above sets `height: min(640px, 80dvh)`), so 100% resolves and the
   sheet fills it. The project dialogs have a max-height and no height — a modal that is only as
   tall as it needs to be — and against an auto-height parent `height: 100%` resolves to `auto`,
   which would hand the form its full content height and leave the body with nothing to shrink
   into: the scrollbar goes back on the dialog and the sticky footer is pushed out of it. That form
   flexes to the dialog's remaining height instead; see `.svc-project__dialog-form` in
   svc-project-client.css. */
.svc-client__location-sheet { height: 100%; }
.svc-client__location-sheet > header, .svc-project__dialog-form > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e7e1ee; padding: 14px 18px; }
.svc-client__location-sheet > header h2, .svc-project__dialog-form > header h2 { margin: 0; font-size: 1.1rem; }
.svc-client__location-sheet > header button, .svc-project__dialog-form > header button { display: grid; width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0; place-items: center; color: var(--svc-client-primary); background: transparent; font: inherit; font-size: 1.6rem; cursor: pointer; }
.svc-client__location-sheet-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; flex-direction: column; gap: 8px; padding: 12px 14px; }
/* The project dialogs' footer carries a refusal paragraph ABOVE its buttons, so it stacks; the
   location sheet has only buttons and is unaffected by a column direction on a single row. */
.svc-client__location-sheet > footer, .svc-project__dialog-form > footer { position: sticky; bottom: 0; display: flex; flex: 0 0 auto; flex-direction: column; gap: 10px; border-top: 1px solid #e5dfea; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.svc-client__location-sheet > footer { flex-direction: row; justify-content: flex-end; }
.svc-client__location-sheet > footer .svc-client__button { min-width: 150px; margin: 0; }
.svc-client__button:disabled { cursor: not-allowed; opacity: .55; }
/* The busy state svc-client.js has always set, finally drawn. Accepting an offer disables every quote
   action and marks the pressed one `is-loading` with aria-busy — and the CSS threw both away: this
   ::after coloured a spinner NO rule ever created (no content, no box, no animation anywhere for this
   class), and `opacity: .9` here put back the .55 dimming the rule above gives a plain disabled button,
   so the one control that was actually working looked less changed than the ones that were merely
   switched off. The owner pressed Accept, saw nothing for about four seconds, then got a dialog.
   A loading button is a disabled button that is also WORKING, so it now keeps the .55 dimming and adds
   the only thing that says "working": motion. The spinner is built like .svc-client__upload-progress >
   span above and reuses its svc-request-spin keyframes rather than declaring a second set; the colours
   are the ones this rule already carried, for white text on the primary fill. */
.svc-client__button.is-loading:disabled { cursor: wait; }
.svc-client__button.is-loading::after { content: ''; flex: 0 0 auto; width: 16px; height: 16px; margin-inline-start: 8px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: svc-request-spin .8s linear infinite; }
/* Reduced motion keeps the ring — a static ring plus `cursor: wait` is still a state change — and
   drops only the rotation, the same trade .svc-client__meeting-spinner makes further down. */
@media (prefers-reduced-motion: reduce) { .svc-client__button.is-loading::after { animation: none; } }
.svc-client__location-city { min-height: 20px; color: #4f416e; font-size: .9rem; }
.svc-client__location-map { width: 100%; min-height: 280px; flex: 1 1 auto; overflow: hidden; border: 1px solid #d8d2e0; border-radius: 12px; background: #f4f2f6; }
.svc-client__location-instruction { margin: 0; color: var(--svc-client-muted); font-size: .82rem; line-height: 1.35; }
/* Progress lives here, not in the confirm button — a label that grows mid-check moves the
   control the customer is reaching for. Reserving the line's height stops the map jumping too. */
.svc-client__location-status { margin: 0; min-height: 1.1rem; color: var(--svc-client-muted); font-size: .82rem; line-height: 1.35; }
.svc-client__location-status[hidden] { display: block; visibility: hidden; }
.svc-client__map-unavailable { display: grid; min-height: 100%; padding: 24px; place-items: center; color: var(--svc-client-muted); text-align: center; }
.svc-client__location-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; border-radius: 10px; padding: 11px 12px; background: #f2eff7; }
.svc-client__location-summary[hidden] { display: none; }
.svc-client__location-summary strong, .svc-client__location-summary span { min-width: 0; overflow-wrap: anywhere; }
.svc-client__location-summary strong { color: #4f416e; font-size: .82rem; }
.svc-client__location-summary span { grid-column: 1; color: var(--svc-client-ink); font-size: .88rem; }
.svc-client__location-summary > .svc-client__location-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.svc-client__location-action { display: inline-flex; min-width: 92px; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--svc-client-primary); border-radius: 8px; padding: 7px 13px; color: #fff; background: var(--svc-client-primary); font: inherit; font-size: .82rem; font-weight: 800; line-height: 1.2; cursor: pointer; }
.svc-client__location-action:hover, .svc-client__location-action:focus-visible { filter: brightness(.94); outline: 3px solid rgba(113, 94, 149, .18); outline-offset: 2px; }
.svc-client__location-action--remove { border-color: #c77f91; color: #913c52; background: #fff; }
.svc-client__request-progress { position: relative; height: 4px; margin: 12px 0 3px; border-radius: var(--radius-pill); background: #ece7f1; }
.svc-client__request-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--svc-client-primary); }
.svc-client[dir='rtl'] .svc-client__request-progress > span { inset: 0 0 0 auto; }
.svc-client__request-progress small { position: absolute; inset-inline-end: 0; top: 8px; color: var(--svc-client-muted); font-size: .72rem; }
.svc-client__request-progress + .svc-client__request-section, .svc-client__request-progress + .svc-client__prerequisite, .svc-client__request-progress + .svc-client__request-review { padding-top: 26px; }
.svc-client__review-section { padding: 6px 0; }
.svc-client__review-section h3 { margin: 14px 0 8px; color: #191638; font-size: 1rem; }
.svc-client__review-section dl { display: grid; gap: 0; margin: 0; }
.svc-client__review-section dl > div { display: grid; grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr); gap: 16px; border-bottom: 1px solid #eee9f2; padding: 12px 0; }
.svc-client__review-section dt { color: var(--svc-client-muted); font-size: .86rem; font-weight: 700; }
.svc-client__review-section dd { min-width: 0; margin: 0; color: var(--svc-client-ink); font-weight: 700; overflow-wrap: anywhere; }
.svc-client__review-section dd span { display: block; margin-top: 4px; color: var(--svc-client-muted); font-size: .82rem; font-weight: 500; }
.svc-client__review-journey { margin-top: 14px; border-top: 1px solid #e7e1ee; padding-top: 14px; }
.svc-client__review-journey > header { margin-bottom: 12px; }
.svc-client__review-journey > header h3 { margin: 0 0 4px; color: var(--svc-client-ink); font-size: 1rem; line-height: 1.35; }
.svc-client__review-journey > header p { margin: 0; color: var(--svc-client-muted); font-size: .82rem; line-height: 1.45; }
.svc-client__review-journey ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.svc-client__review-journey li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; padding: 0 0 13px; }
.svc-client__review-journey li:last-child { padding-bottom: 0; }
.svc-client__review-journey li:not(:last-child)::after { position: absolute; inset-block: 28px 0; inset-inline-start: 13px; width: 2px; content: ''; background: #ddd6e7; }
.svc-client__review-journey li > bdi { z-index: 1; display: grid; width: 28px; height: 28px; border: 2px solid var(--svc-client-primary); border-radius: 50%; place-items: center; color: var(--svc-client-primary); background: #fff; font-size: .78rem; font-weight: 800; }
.svc-client__review-journey li > div { min-width: 0; padding-top: 3px; }
.svc-client__review-journey li strong { display: block; color: var(--svc-client-ink); font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.svc-client__review-journey li small { display: block; margin-top: 2px; color: var(--svc-client-muted); font-size: .76rem; }
.svc-client__review-journey li.is-pending > bdi { border-style: dashed; color: var(--svc-client-muted); }
.svc-client__request-actions { position: sticky; z-index: 3; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e5dfea; padding: 12px 14px; background: rgba(255, 255, 255, .98); box-shadow: 0 -8px 18px rgba(48, 34, 67, .06); }
.svc-client__request-actions .svc-client__button { min-width: 150px; margin: 0; }
.svc-client__request-actions .svc-client__request-submit { position: static; width: auto; margin: 0; box-shadow: none; }
.svc-client--request-embed { padding: 12px; }
.svc-client--request-embed .svc-client__shell { width: 100%; }
.svc-client--request-embed .svc-client__request-form { margin: 0; padding: 0; box-shadow: none; }

/* Catalog typography must win over the site-wide display type scale. */
/* 20px, on the ladder. 32px made the storefront title the largest text in the product and a
   different size again from every other page — the 'super large titles' complaint. */
#svc-client-root.svc-client--catalog .svc-client__catalog-heading h1 { margin: 0 0 5px !important; color: #191638 !important; font-size: 1.25rem !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; }
#svc-client-root.svc-client--catalog .svc-client__catalog-heading p { margin: 0 !important; font-size: 15px !important; line-height: 1.5 !important; }
/* A card title is an h2: 16px, not 20px — at 20px it matched the PAGE TITLE of the detail
   screen, so a service card shouted as loudly as the request it opens. */
#svc-client-root.svc-client--catalog .svc-client__catalog-card-body h2 { margin: 0 0 7px !important; color: #191638 !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
#svc-client-root.svc-client--catalog .svc-client__catalog-description { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
#svc-client-root.svc-client--catalog .svc-client__catalog-response-time { font-size: 13px !important; line-height: 1.35 !important; }
#svc-client-root.svc-client--catalog .svc-client__catalog-cta { font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; }

@media (max-width: 900px) and (min-width: 641px) {
    .svc-client__catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .svc-client__catalog-card, .svc-client__catalog-card:only-child, .svc-client__catalog-card:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }
    .svc-client__catalog-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 8px); justify-self: center; }
}
@media (max-width: 640px) {
    .svc-client--catalog { padding: 20px 14px 48px; }
    .svc-client__catalog-heading { padding-bottom: 13px; text-align: center; }
    .svc-client__catalog-heading p { margin-inline: auto; }
    .svc-client__catalog-actions { align-items: stretch; flex-direction: column; gap: 8px; margin: 12px 0 15px; }
    .svc-client__catalog-action { width: 100%; min-height: 44px; padding: 9px 14px; font-size: 13px; }
    .svc-client__catalog-search { margin-bottom: 18px; }
    .svc-client__catalog-search input { min-height: 46px; font-size: 14px; }
    .svc-client__catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .svc-client__catalog-card, .svc-client__catalog-card:only-child, .svc-client__catalog-card:nth-last-child(2):nth-child(3n + 1), .svc-client__catalog-card:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
    .svc-client__catalog-cover { min-height: 0; }
    /* Phone. The column count is no longer a width decision — the form is one column everywhere now
       (see --stacked above) — so all this block still owns is the vertical rhythm: 10px between
       questions instead of 13px. Every gram matters here, because one column is TALLER than the two
       it replaced and this surface is mostly read on a phone. The option rows stay segmented (2-4
       chips across, --even above): a full-width stacked row per OPTION is what would actually blow
       the viewport, and it is also not what the owner asked for — the questions go vertical, their
       answers stay side by side. Everything is scoped to the estimator body so the request wizard's
       own mobile spacing is untouched. */
    .svc-client__request-fields--stacked { gap: 10px; }
    .svc-client__catalog-estimator-body { padding: 10px 12px 0; }
    /* !important on the size for the third time in this block's history and always the same cause:
       .svc-client__request-intro is a <p>, and typography.css pins every <p> under 768px at 14px
       !important. Without it this line stayed 14px/1.625 and the 8px margin was shaving a rounding
       error off a paragraph that had ignored the instruction next to it. */
    .svc-client__catalog-estimator-body .svc-client__request-intro { margin-bottom: 8px; font-size: .84rem !important; line-height: 1.5 !important; }
    /* ...and dropped entirely once there is a build-type picker, because «ما الذي تريد بناءه؟» IS the
       instruction now and the intro is a second, vaguer copy of it. That line costs 26px with its margin,
       out of a viewport this surface was already measured at zero spare height on — it is most of what
       buys the picker its room. Desktop, which has the room, keeps it; and it stays the dialog's
       aria-describedby target either way, since the accname algorithm reads referenced elements that are
       not rendered. Scoped to :has() a picker so a page whose API sent no catalogue is untouched. */
    .svc-client__catalog-estimator-body:has([data-svc-estimator-type]) > .svc-client__request-intro { display: none; }
    .svc-client__catalog-estimator-route { padding: 14px; }
    .svc-client__catalog-estimator-body .svc-client__field > label { margin-bottom: 4px; }
    .svc-client__catalog-estimator-body .svc-client__field small { margin-top: 3px; }
    /* Four-up chips stack their glyph above their label — see the full reasoning at
       .svc-client__radio-group--quad above. Phone only: a quarter of a 375px row is ~75px, which
       cannot hold "Renovation" beside a radio glyph; a quarter of the 720px sheet is ~166px, which
       can, and stacking there was the one row on the form whose glyph left its word. */
    .svc-client__radio-group--quad label { flex-direction: column; gap: 3px; padding-block: 6px; padding-inline: 4px; }
    /* The compound is the tallest form this sheet can produce, and these are the two hint lines that
       carry no answer and no instruction their own control does not already enforce: عدد الوحدات is
       type=number min=2 max=500 with a numeric keypad and a refusal that states the range verbatim, and
       الارتفاع الصافي opens prefilled with the baseline the price already assumes. Named per field now
       rather than via the row wrapper that used to hold them, which went with the two-column layout.
       مساحة الأرض keeps its hint at every width, because 50–10,000 m² is a band nobody can guess and it
       is the field every single type asks. Desktop keeps all three — it has the room. */
    [data-svc-estimator-unitcount-field] small, [data-svc-estimator-clearheight-field] small { display: none; }
    /* Keep the safe-area term — dropping it to shave padding is exactly how a CTA ends up under the
       iOS home indicator. */
    .svc-client__catalog-estimator-body .svc-client__request-actions { padding-block: 10px calc(10px + env(safe-area-inset-bottom)); }
    .svc-client__catalog-estimator-headline { padding: 13px 14px; }
    .svc-client__catalog-estimator-range { font-size: 1.45rem !important; }
    .svc-client__catalog-card-body { padding: 15px 16px 16px; }
    /* One size at every width — the clamp/step-down is what made the same heading feel huge on
       desktop and cramped on mobile. */
    #svc-client-root.svc-client--catalog .svc-client__catalog-heading h1 { font-size: 1.25rem !important; }
    #svc-client-root.svc-client--catalog .svc-client__catalog-heading p { font-size: 14px !important; line-height: 1.45 !important; }
}
@media (max-width: 760px) {
    .svc-client__request-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
    .svc-client__request-dialog-layout { height: 100dvh; max-height: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    /* THE SHEET IS CENTRED, NOT ANCHORED TO THE BOTTOM EDGE — owner's call (2026-08-08), seen rendered
       against the bottom-anchored version this replaces and preferred centred over it. `margin: auto`
       on all four sides against the UA's `inset-block: 0` is the same trick the unconditional desktop
       rule above already uses; here it splits whatever height `fit-content` gives back evenly above
       and below, instead of stacking all of it above the sheet the way `margin: auto 0 0` did. Two
       costs, both accepted and neither engineered around:
         · the CTA drifts. A centred sheet grows in both directions as the form is answered, so the
           button's on-screen position moves between states instead of holding still on the bottom
           edge — the bottom-anchored version bought a fixed CTA position for free; centring gives it
           back on purpose.
         · the backdrop, which is this dialog's dismiss target (svc-client.js closes on a click that
           lands on the <dialog> itself), now sits both above AND below the sheet, including under the
           thumb, instead of entirely above it.
       No fill class, no measurement, no compensating margin comes back to soften either cost: that
       machinery is gone (see svc-client.js above `.svc-client__catalog-estimator-body`, and the
       sheet-height rule above) and stays gone. Centring is a value change on one property, not a
       reason to rebuild what the last packet deleted.
       WIDTH, MAX-WIDTH AND RADIUS COME BACK TOO, ESTIMATOR-SCOPED. The platform-wide rule above still
       turns every .svc-client__request-dialog into a 100vw, square-cornered, edge-to-edge sheet —
       right for a wizard that fills the phone, wrong for a short sheet floating in the middle of one:
       centred at 100vw with square corners it reads as a mis-sized full-screen dialog, not a card.
       Every other content-height popup on this codebase insets its panel from the viewport edge and
       keeps a border-radius at every width down to 480px — .stop-display-popup (overlay padding
       24px→16px→8px, a constant 12px radius), .unit-filter-popup (width 100% of a 16px→12px overlay
       inset, a constant 24px radius) and .units-details-popup (overlay padding 24px→16px→8px, radius
       24px→16px), each with an identical Client-area variant — and none of them go edge-to-edge or
       square-cornered on a phone. This follows that house pattern rather than inventing another one.
       The width formula is the desktop rule's own, `min(720px, calc(100vw - 28px))`, re-declared
       rather than replaced with a new number so the mobile card is the desktop card narrower, not a
       new shape; the radius is the same 16px for the same reason. No border, unlike the desktop rule:
       box-shadow is already unconditional on .svc-client__request-dialog above and shows up on its own
       now that the sheet is inset, and shadow-only is what every popup named above actually does for
       its own edge — this follows their pattern rather than the desktop rule's. The request wizard's
       own sheet is untouched: still full-screen, for the reason the height carve-out above already
       gives — a wizard that resizes between steps is the Projects stream's call, not this one's.
       max-height and the layout rule below are otherwise unchanged: the layout still needs its own cap
       to mirror the dialog's, or `fit-content` measures a 100dvh child regardless of margin, and
       padding-bottom stays 0 because the sticky .svc-client__request-actions bar already spends
       env(safe-area-inset-bottom) once, in its own padding — counting it again here would spend it
       twice. */
    [data-svc-estimator-modal].svc-client__request-dialog { width: min(720px, calc(100vw - 28px)); max-width: 720px; max-height: 100dvh; margin: auto; border-radius: 16px; }
    [data-svc-estimator-modal] .svc-client__request-dialog-layout { height: auto; max-height: 100dvh; padding-bottom: 0; }
    .svc-client__request-dialog-header { padding: 12px 14px; }
    /* Same size at every width — stepping down to 18px is what made one heading feel like two. */
    
    .svc-client--request-embed { padding: 0; }
    .svc-client--request-embed .svc-client__request-form { border: 0; border-radius: 0; padding: 0; }
    .svc-client__request-heading { padding: 12px 14px; }
    .svc-client__request-heading h1 { font-size: 18px; }
    .svc-client__request-body { padding: 0 14px; }
    .svc-client__request-actions { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
    .svc-client__request-actions .svc-client__button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
    /* Declared after the 1:1 split above, and equally specific, so source order is what makes it
       stick. Equal billing is wrong for this pair: one of the two buttons is the reason the whole
       feature exists and the other one says "change my answers". */
    .svc-client__catalog-estimator-body [data-svc-estimator-cta] { flex: 1.9 1 0; }
    .svc-client__location-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
    .svc-client__location-sheet { height: 100dvh; padding-top: env(safe-area-inset-top); }
    .svc-client__location-sheet-body { padding: 10px 12px; }
    .svc-client__location-sheet > footer { padding-inline: 12px; }
    .svc-client__location-sheet > footer .svc-client__button { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
    .svc-client__location-map { min-height: 0; height: 100%; }
    .svc-client__review-section dl > div { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 10px; }
}
@media (max-width: 390px) {
    .svc-client__catalog-shell, .svc-client__catalog-results, .svc-client__catalog-card, .svc-client__catalog-search, .svc-client--request-embed, .svc-client--request-embed .svc-client__shell, .svc-client--request-embed .svc-client__panel, .svc-client__request-form, .svc-client__request-body { min-width: 0; max-width: 100%; }
    .svc-client__review-section dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .svc-client__upload-item { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .svc-client__upload-item img, .svc-client__upload-file-icon { width: 38px; height: 38px; }
    .svc-client__location-summary { grid-template-columns: minmax(0, 1fr); }
    .svc-client__location-summary > .svc-client__location-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-client__location-action { width: 100%; min-width: 0; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .svc-client__catalog-card, .svc-client__catalog-action { transition: none; } }

/* My Services lives in the authenticated Client account shell, not the public services canvas. */
.svc-client-profile .svc-client--my {
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--svc-client-ink);
    background: transparent;
}

.svc-client--my .svc-client__my-shell {
    min-width: 0;
    border: 1px solid #e3ddea;
    border-radius: 14px;
    padding: 24px;
    background: #fff;
}

.svc-client--my .svc-client__my-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.svc-client--my .svc-client__my-header h1 {
    margin: 0;
    color: #191638;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
}

.svc-client--my .svc-client__my-controls {
    display: grid;
    gap: 14px;
    margin-bottom: 20px;
}

.svc-client--my .svc-client__my-search {
    display: grid;
    flex: 1 1 240px;
    gap: 6px;
    min-width: 0;
    color: var(--svc-client-ink);
    font-size: .86rem;
    font-weight: 700;
}

.svc-client--my .svc-client__my-search input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid #d8d2e0;
    border-radius: var(--radius-control);
    padding: 10px 12px;
    color: var(--svc-client-ink);
    background: #fff;
    font: inherit;
}

.svc-client--my .svc-client__my-search input:focus {
    border-color: var(--svc-client-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(106, 93, 139, .13);
}

/* FIVE: All / Needs you / Open / Completed / Closed. This used to be six while "Archived" was a
   filter here too; the archive feature was removed client-side and the sixth chip went with it, but
   the grid was left at six tracks — a phantom empty column that sat as unexplained blank space at
   one end of the row. The column count has to track the chip count exactly, same reason the six-vs-
   five width sets a few lines up (`svc-client__my-table`) key themselves off "how many are actually
   there" instead of a fixed number. The narrow breakpoint below already drops this to two and is
   untouched: this component has always wrapped these chips when there was no room. */
.svc-client--my .svc-client__my-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.svc-client--my .svc-client__my-filter,
.svc-client--my .svc-client__my-clear {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #ddd6e7;
    border-radius: 10px;
    padding: 10px 12px;
    color: #51466d;
    background: #fff;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
}

.svc-client--my .svc-client__my-filter {
    flex-direction: column;
}

.svc-client--my .svc-client__my-filter span {
    color: inherit;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}

.svc-client--my .svc-client__my-filter bdi {
    display: block;
    color: #5b4f77;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

/* NEEDS-YOU IS A SIGNAL, NOT JUST A COUNT. The other four chips are a plain tally of a status the
   platform decided; this one is the single chip whose count is a to-do list only the customer can
   clear (see oneListNeedsYou). Left to share the same bare white/grey box as the rest, it read as
   equally low-priority as "Closed" until the customer happened to click it. Same accent colour as
   the on-row "needs you" badge and the row's own left-edge highlight (#6A5D8B, both a few rules
   below) — one colour, learned once, recognised in three places — so the chip that matters most is
   the one chip that already looks different before anyone touches it. `:hover`/`.is-active` below
   still wins (same specificity, declared later) and turns it solid, same as any other chip. */
.svc-client--my .svc-client__my-filter[data-svc-my-filter="needs-you"] {
    border-color: #6A5D8B;
    background: #f3f0fa;
}

.svc-client--my .svc-client__my-filter[data-svc-my-filter="needs-you"] bdi {
    color: #6A5D8B;
}

.svc-client--my .svc-client__my-filter:hover,
.svc-client--my .svc-client__my-filter.is-active,
.svc-client--my .svc-client__my-clear:hover {
    border-color: var(--svc-client-primary);
    color: #fff;
    background: var(--svc-client-primary);
}

.svc-client--my .svc-client__my-filter.is-active bdi {
    color: #fff;
}

.svc-client--my .svc-client__my-table-wrap {
    overflow: hidden;
    border: 1px solid #e7e1ee;
    border-radius: 12px;
}

.svc-client--my .svc-client__my-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.svc-client--my .svc-client__my-table th,
.svc-client--my .svc-client__my-table td {
    padding: 14px 16px;
    color: var(--svc-client-ink);
    text-align: start;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.svc-client--my .svc-client__my-table th {
    color: var(--svc-client-muted);
    background: #faf9fd;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .02em;
    /* Same tone as the table-wrap border two rules up — a visible seam under the header row is
       what the platform's other data tables (the finance order/wallet lists this was checked
       against) use to separate header from body; this table had none. */
    border-bottom: 2px solid #e7e1ee;
}

/* Barely-there banding on every other row, same idea as the finance order/wallet tables' own
   subtle row tint — reuses this table's own header colour (#faf9fd) rather than a new one.
   Excluded from a "needs you" row: that row already carries its own tint (below) and the two must
   not mix. */
.svc-client--my .svc-client__my-table tbody tr:nth-child(even):not(.svc-client__my-row--needs-you) td {
    background: #faf9fd;
}

.svc-client--my .svc-client__my-table td {
    border-top: 1px solid #eeeaf2;
    font-size: .9rem;
}

/* WIDTHS BELONG TO A COLUMN COUNT, NOT TO A POSITION.
   ONE component draws TWO tables — the requests list has five columns, "My meetings" has six — and
   these widths were written for the five-column one and reached the six-column one by position.
   Five widths summing to 100% under `table-layout: fixed` leave the SIXTH column exactly 0px: on
   "My meetings" that was «الإجراء», whose cell holds the only action on the row, invisible on every
   row and unreachable because the wrapper is `overflow-x: hidden`. The header cell wrapped one
   character per line and stood the header row up 167px tall — that stack of Arabic letters on the
   edge of the table was this rule, not a text-rendering bug.

   `:nth-child(1):nth-last-child(N)` matches the first cell ONLY in a row of exactly N, and the `~`
   chain hangs the rest off that one match, so each set applies to its own table and neither can
   reach the other. Under `table-layout: fixed` the widths are read off the FIRST row, so the
   `<thead>` row is what these actually measure — which is why they are keyed on the cell and not on
   `th`/`td`. A seventh column added later matches no set and falls back to equal shares: still
   narrow, never zero.

   The five-column list: what you asked for · who is doing it · where it stands · what is next · open.
   The action column was 14% and under `table-layout: fixed` that is a hard ceiling, not a
   suggestion: at this table's actual on-screen width "View details" has no room to stay on one
   line, and the global `overflow-wrap: anywhere` a few rules up (needed so a long provider name or
   project title never pushes the table wider than its column) split the word itself in two —
   "detail" on one line, a lone "s" on the next. Widened here at the other columns' shared expense
   (2 points off the first, 2 off the second, 2 off the fourth) and, belt-and-braces, the button
   itself below no longer allows a mid-word break at all. */
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(5) { width: 24%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(5) ~ :nth-child(2) { width: 20%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(5) ~ :nth-child(3) { width: 16%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(5) ~ :nth-child(4) { width: 20%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(5) ~ :nth-child(5) { width: 20%; }

/* The six-column list: when · which service · which step · with whom · status · open.
   The action column is sized for «انضم الآن» — the longest word it ever holds — and the status
   column for «تم الانعقاد», the longest chip. The four that pay for them wrap already
   (`overflow-wrap: anywhere` above), and "when" keeps enough room for a whole «16/08/2026 14:30» so
   the one cell that must NOT wrap does not. */
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) { width: 20%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) ~ :nth-child(2) { width: 20%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) ~ :nth-child(3) { width: 14%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) ~ :nth-child(4) { width: 16%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) ~ :nth-child(5) { width: 15%; }
.svc-client--my .svc-client__my-table tr > :nth-child(1):nth-last-child(6) ~ :nth-child(6) { width: 15%; }

.svc-client--my .svc-client__my-subtitle {
    margin: 4px 0 0;
    color: var(--svc-client-muted);
    font-size: .88rem;
}

.svc-client--my .svc-client__my-start {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.svc-client--my .svc-client__my-start .svc-client__button {
    margin-top: 0;
}

/* The route's cover picture, next to the title it belongs to — a project made from a route with no
   cover, and every standalone request, has no `<img>` here at all (rowMarkup only emits one when
   `coverImageUrl` is set), so this wrapper degrades to plain text with zero layout change. Sized
   off this table's own scale, not the catalogue card's `svc-client__catalog-cover-image`: that one
   is a full-bleed card background, this is a row accent. */
.svc-client--my .svc-client__my-thing {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.svc-client--my .svc-client__my-thing-image {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #f1eef7;
    object-fit: cover;
}

.svc-client--my .svc-client__my-thing-text {
    min-width: 0;
}

.svc-client--my .svc-client__my-title {
    color: var(--svc-client-ink);
    font-weight: 800;
    text-decoration: none;
}

.svc-client--my .svc-client__my-title:hover,
.svc-client--my .svc-client__my-title:focus-visible {
    text-decoration: underline;
}

/* The reference number is a lookup handle, not the headline — a customer reads the title first and
   quotes the number only when they contact us. */
.svc-client--my .svc-client__my-reference {
    display: block;
    margin-top: 3px;
    color: var(--svc-client-muted);
    font-size: .78rem;
}

/* "Needs you" is the only thing on a row that shouts, because it is the only thing on a row that
   nobody but the customer can clear. */
.svc-client--my .svc-client__my-needs {
    display: inline-block;
    margin-inline-end: 6px;
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    background: #6A5D8B;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.svc-client--my .svc-client__my-row--needs-you td {
    background: #fbfaff;
}

.svc-client--my .svc-client__my-row--needs-you td:first-child {
    box-shadow: inset 3px 0 0 0 #6A5D8B;
}

.svc-client--my[dir="rtl"] .svc-client__my-row--needs-you td:first-child {
    box-shadow: inset -3px 0 0 0 #6A5D8B;
}

.svc-client--my .svc-client__my-next {
    display: inline;
}

/* THE PER-SERVICE CHIPS (2026-08-20). A genuine multi-Service project row's ColWho: one line per
   live Service instead of the "providers assigned: X of Y" fraction the owner rejected outright —
   "It SHOULD show the Services and their status."
   The title stays plain ink text — the Service name is not a status and should not compete with
   one for attention — and only the status word after it wears colour. That colour is copied
   BYTE-FOR-BYTE from the project-details screen's own `.svc-project__client-state` tones
   (svc-project-client.css, a few rules up the file this one loads alongside on every screen that
   uses it): the same muted default every "matching"/"waiting"/neutral state on that screen already
   falls back to, the same amber for an "action"-shaped state, the same green for a "completed"
   -shaped one. No new colour is introduced for this table. */
.svc-client--my .svc-client__service-chips {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-client--my .svc-client__service-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    min-width: 0;
}

.svc-client--my .svc-client__service-chip-title {
    color: var(--svc-client-ink);
    font-weight: 700;
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.svc-client--my .svc-client__service-chip-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: var(--svc-client-muted);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.svc-client--my .svc-client__service-chip-status::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #887ba0;
}

.svc-client--my .svc-client__service-chip-status--action {
    color: #9c6718;
}

.svc-client--my .svc-client__service-chip-status--action::before {
    background: #c98a22;
}

.svc-client--my .svc-client__service-chip-status--completed {
    color: #237e65;
}

.svc-client--my .svc-client__service-chip-status--completed::before {
    background: #237e65;
}

/* Why an archived row is still on screen. The four declarations are .svc-client__my-reference's own,
   copied verbatim — same muted token, same 3px lift, same .78rem — because this is the same thing
   that class already is: a quiet second line under a louder first one. It is not called
   my-reference only because it is not a reference number. No new colour, size or spacing exists here. */
.svc-client--my .svc-client__my-note {
    display: block;
    margin-top: 3px;
    color: var(--svc-client-muted);
    font-size: .78rem;
}

/* The platform's other order tables (finance orders/wallet) give the one action on a row a filled
   pill — not a bare link — so it reads as a control at a glance instead of blending into the text
   column beside it. Same fill and same hover as `.svc-client__button` above, reused rather than a
   second colour, just sized for a table cell instead of a page-level CTA. */
.svc-client--my .svc-client__my-details {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 8px 16px;
    background: var(--svc-client-primary);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    /* Overrides the table's own `overflow-wrap: anywhere` (set on every td so a long provider name
       or title can never force the table wider than its column). That rule is right for prose cells
       and wrong for a two-word button label: on English rows it split "details" mid-word into
       "detail" / "s". A button's own label is short and finite, never the runaway text the anywhere
       rule exists for, so it only needs to wrap on a real word boundary, never inside one. */
    overflow-wrap: normal;
    word-break: keep-all;
}

.svc-client--my .svc-client__my-details:hover,
.svc-client--my .svc-client__my-details:focus-visible {
    background: #574a75;
}

.svc-client--my .svc-client__my-empty,
.svc-client--my .svc-client__my-loading {
    display: grid;
    min-height: 180px;
    place-items: center;
    gap: 14px;
    border: 1px dashed #cfc6dc;
    border-radius: 12px;
    padding: 24px;
    color: var(--svc-client-muted);
    text-align: center;
}

.svc-client--my .svc-client__my-empty p {
    margin: 0;
}

.svc-client--my .svc-client__my-loading {
    border-style: solid;
}

@media (max-width: 640px) {
    .svc-client--my .svc-client__my-shell {
        padding: 16px;
    }

    .svc-client--my .svc-client__my-header {
        align-items: stretch;
        flex-direction: column;
    }

    .svc-client--my .svc-client__my-header .svc-client__button {
        width: 100%;
    }

    .svc-client--my .svc-client__my-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .svc-client--my .svc-client__my-filter {
        min-width: 0;
    }

    .svc-client--my .svc-client__my-table-wrap {
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    .svc-client--my .svc-client__my-table,
    .svc-client--my .svc-client__my-table tbody,
    .svc-client--my .svc-client__my-table tr,
    .svc-client--my .svc-client__my-table td {
        display: block;
        width: 100% !important;
    }

    .svc-client--my .svc-client__my-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .svc-client--my .svc-client__my-table tr {
        margin-bottom: 10px;
        border: 1px solid #e7e1ee;
        border-radius: 10px;
        padding: 8px 12px;
        background: #fff;
    }

    .svc-client--my .svc-client__my-table td {
        display: grid;
        grid-template-columns: minmax(92px, .7fr) minmax(0, 1.3fr);
        align-items: center;
        gap: 12px;
        min-height: 44px;
        border: 0;
        padding: 7px 0;
        text-align: end;
    }

    /* THE SEPARATOR THE TABLE HAS AND THE CARD LOST. On the wide view every row is parted from the
       next by `td { border-top: 1px solid #eeeaf2 }`; when the table stacks, `border: 0` above drops
       it and the five label/value pairs inside one card butt together at 7px with nothing between
       them — «إلى أين وصل» reads flush under «من ينفّذه», and the two-line "what is next" cell (the
       move, the count, and on a held row the archive note under both) runs straight into the action
       row beneath it. On a phone, which is where this list is longest, that is the whole row read as
       one paragraph.
       Put back at the SAME value the wide table uses — `#eeeaf2`, a hairline and nothing else — so
       one component has one row separator in both of its layouts rather than one in one of them.
       `td + td` and not `td`, because the first pair is the top of the card and a rule above it
       would draw a second border a pixel inside the card's own. */
    .svc-client--my .svc-client__my-table td + td {
        border-top: 1px solid #eeeaf2;
    }

    .svc-client--my .svc-client__my-table td::before {
        content: attr(data-label);
        color: var(--svc-client-muted);
        font-size: .78rem;
        font-weight: 800;
        text-align: start;
    }

    .svc-client--my .svc-client__my-table td .svc-client__chip,
    .svc-client--my .svc-client__my-table td .svc-client__my-details,
    /* Stacked cards give every value cell `display: grid`, and a lone `inline-block` child of a
       grid cell STRETCHES to fill it by default — `display: inline-block` on the badge itself does
       not opt back out of that. The chip and the details button already had this line; the "needs
       you" badge was the one value that kept being dropped into the same grid cell alone (a genuine
       project row's ColNext IS just this badge, nothing beside it — see the cell builder in
       svc-client.js) and so was the one that visibly stretched into a full-width purple bar instead
       of the small pill it is everywhere else on this table. */
    .svc-client--my .svc-client__my-table td .svc-client__my-needs {
        justify-self: end;
    }
}

@media (max-width: 390px) {
    .svc-client-profile .content,
    .svc-client-profile .content-wrapper,
    .svc-client-profile .services-content-section,
    .svc-client--my,
    .svc-client--my .svc-client__my-shell {
        min-width: 0;
        max-width: 100%;
    }

    .svc-client--my .svc-client__my-shell {
        padding: 12px;
    }

    .svc-client--my .svc-client__my-filter {
        padding-inline: 8px;
        font-size: .8rem;
    }

    .svc-client--my .svc-client__my-table td {
        grid-template-columns: minmax(78px, .65fr) minmax(0, 1.35fr);
        gap: 8px;
        font-size: .84rem;
    }
}

/* Client Detail shares the authenticated account shell with My Services. */
.svc-client-profile .svc-client--detail { min-width: 0; padding-inline: 0; direction: inherit; color: var(--svc-client-ink); background: transparent; }
.svc-client--detail .svc-client__shell { width: 100%; max-width: none; margin: 0; padding: 0; }
.svc-client--detail .svc-client__detail-summary,
.svc-client--detail .svc-client__detail-current,
.svc-client--detail .svc-client__detail-workspace,
.svc-client--detail .svc-client__detail-history,
.svc-client--detail .svc-client__detail-journey,
.svc-client--detail .svc-client__detail-help { border: 2px solid #d8d0e2; border-radius: 14px; background: #fff; }
.svc-client--detail .svc-client__detail-summary { display: grid; gap: 16px; padding: 16px 18px; }
.svc-client--detail .svc-client__detail-summary > div > span,
.svc-client--detail .svc-client__detail-current > span,
.svc-client--detail .svc-client__detail-workspace > header > span { display: block; color: var(--svc-client-muted); font-size: .76rem; font-weight: 800; }
/* 20px, matching the `.svc-client h1` ladder above — this more specific rule was pinning 24px
   and overriding it, which is why the service name kept coming back oversized. */
.svc-client--detail .svc-client__detail-summary h1 { margin: 4px 0; color: #191638; font-size: 1.25rem !important; line-height: 1.3 !important; }
.svc-client--detail .svc-client__detail-current h2,
.svc-client--detail .svc-client__detail-workspace h2 { margin: 4px 0; color: #191638; font-size: 1rem !important; line-height: 1.3 !important; }
.svc-client--detail .svc-client__detail-summary p,
.svc-client--detail .svc-client__detail-current p,
.svc-client--detail .svc-client__detail-workspace p { margin: 0; }
.svc-client--detail .svc-client__detail-summary dl { display: grid; gap: 9px; margin: 0; }
.svc-client--detail .svc-client__detail-summary dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.svc-client--detail .svc-client__detail-summary dt { color: var(--svc-client-muted); font-weight: 700; }
.svc-client--detail .svc-client__detail-summary dd { margin: 0; font-weight: 800; text-align: end; }
[dir='rtl'] .svc-client--detail .svc-client__detail-summary,
[dir='rtl'] .svc-client--detail .svc-client__detail-summary dl > div { direction: rtl; }
.svc-client--detail .svc-client__detail-grid { display: grid; grid-template-areas: 'main side'; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 16px; margin-top: 12px; align-items: start; }
.svc-client--detail .svc-client__detail-grid main { display: grid; grid-area: main; gap: 12px; min-width: 0; }
.svc-client--detail .svc-client__detail-grid aside { display: grid; grid-area: side; gap: 12px; min-width: 0; }
[dir='rtl'] .svc-client--detail .svc-client__detail-grid { grid-template-areas: 'side main'; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); }
.svc-client--detail .svc-client__detail-current { padding: 14px 18px; border-color: var(--svc-client-primary); box-shadow: 0 3px 12px rgba(67, 52, 99, .08); }
.svc-client--detail .svc-client__detail-workspace { min-width: 0; container: svc-detail-workspace / inline-size; padding: 16px 18px; }
.svc-client--detail .svc-client__detail-workspace > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.svc-client--detail .svc-client__detail-workspace--quote-gate { border: 0; padding: 0; background: transparent; }
.svc-client--detail .svc-client__detail-workspace > header { margin-bottom: 14px; }
.svc-client--detail .svc-client__detail-journey { padding: 16px 18px; }
.svc-client--detail .svc-client__detail-journey header h2,
.svc-client--detail .svc-client__detail-help h2 { margin: 0; color: #191638; font-size: 1rem !important; line-height: 1.3 !important; }
.svc-client--detail .svc-client__detail-journey ol { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.svc-client--detail .svc-client__journey-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); min-height: 54px; color: var(--svc-client-muted); }
.svc-client--detail .svc-client__journey-step:not(:last-child)::after { position: absolute; inset-inline-start: 13px; top: 28px; bottom: -1px; width: 2px; content: ''; background: #e5e0eb; }
.svc-client--detail .svc-client__journey-step > button { display: grid; grid-column: 1 / -1; grid-template-columns: 28px minmax(0, 1fr); width: 100%; border: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.svc-client--detail .svc-client__journey-step > button:focus-visible { border-radius: var(--radius-control); outline: 2px solid var(--svc-client-primary); outline-offset: 3px; }
.svc-client--detail .svc-client__journey-marker { z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #d8d2e0; border-radius: 50%; color: #777181; background: #fff; font-size: .8rem; font-weight: 800; }
.svc-client--detail .svc-client__journey-copy { display: grid; gap: 2px; min-width: 0; padding: 3px 0 12px 10px; }
.svc-client--detail .svc-client__journey-copy strong { color: inherit; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.svc-client--detail .svc-client__journey-copy small { font-size: .76rem; line-height: 1.3; }
.svc-client--detail .svc-client__journey-step.is-skipped { opacity: .55; }
.svc-client--detail .svc-client__journey-step.is-skipped .svc-client__journey-marker { border-style: dashed; }
.svc-client--detail .svc-client__journey-step.is-open { color: #4f416e; }
.svc-client--detail .svc-client__journey-step.is-open .svc-client__journey-marker { border-color: var(--svc-client-primary); color: var(--svc-client-primary); }
.svc-client--detail .svc-client__journey-step.is-locked { min-height: 44px; opacity: .78; }
.svc-client--detail .svc-client__journey-step.is-locked .svc-client__journey-copy strong { font-size: .82rem; font-weight: 600; }
.svc-client--detail .svc-client__journey-step.is-complete { color: #2e6b52; }
.svc-client--detail .svc-client__journey-step.is-complete .svc-client__journey-marker { border-color: #49a078; color: #fff; background: #49a078; }
.svc-client--detail .svc-client__journey-step.is-current { color: #4f416e; }
.svc-client--detail .svc-client__journey-step.is-current .svc-client__journey-marker { border: 4px solid var(--svc-client-primary); color: var(--svc-client-primary); box-shadow: 0 0 0 3px rgba(106, 93, 139, .14); }
.svc-client--detail .svc-client__journey-step.is-current .svc-client__journey-copy strong { color: #191638; font-size: .98rem; font-weight: 900; }
.svc-client--detail .svc-client__journey-step.is-locked { opacity: .68; }
.svc-client--detail .svc-client__detail-history { overflow: hidden; }
.svc-client--detail .svc-client__detail-history > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 15px 18px; font-weight: 800; }
.svc-client--detail .svc-client__detail-history > summary span { display: inline-grid; min-width: 24px; min-height: 24px; place-items: center; border-radius: var(--radius-pill); color: #fff; background: var(--svc-client-primary); font-size: .78rem; }
.svc-client--detail .svc-client__detail-history > div { display: grid; gap: 10px; padding: 0 18px 18px; }
.svc-client--detail .svc-client__detail-history-item { padding: 12px; border: 1px solid #eeeaf2; border-radius: 10px; }
.svc-client--detail .svc-client__detail-history-item > header { display: flex; justify-content: space-between; gap: 10px; }
.svc-client--detail .svc-client__detail-history-item small { color: var(--svc-client-muted); }
.svc-client--detail .svc-client__detail-history-item.is-selected { border-color: var(--svc-client-primary); box-shadow: 0 0 0 2px rgba(106, 93, 139, .12); }
.svc-client--detail .svc-client__detail-history-quote { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; border-top: 1px solid #eeeaf2; padding-top: 10px; color: var(--svc-client-muted); font-size: .82rem; }
.svc-client--detail .svc-client__detail-history-quote strong { color: var(--svc-client-ink); }
.svc-client--detail .svc-client__detail-help { padding: 14px 18px; }
.svc-client--detail .svc-client__detail-help p { margin: 6px 0 0; color: var(--svc-client-muted); font-size: .84rem; line-height: 1.45; }
.svc-client--detail .svc-client__detail-secondary { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 4px 2px 0; }
/* The explanation shown when neither cancel nor dispute is available. It replaces what used to be an
   empty panel, so it must read as information the owner is being given — not as a disabled control. */
.svc-client--detail .svc-client__detail-help-note { margin-top: 8px; border-top: 1px solid #eeeaf2; padding-top: 10px; }
.svc-client--detail .svc-client__detail-help-note strong { display: block; color: var(--svc-client-ink); font-size: .9rem; line-height: 1.35; }
.svc-client--detail .svc-client__payment--offline { border-color: #e3ddea; background: #faf9fd; }
.svc-client--detail .svc-client__payment--blocked { border-color: #d9ccd9; background: #faf8fb; }
/* B-47 follow-up: the read-only record of a settled payment. Quieter than an action panel —
   it asks for nothing; it states the amount, the rail that took it, and where the receipt is. */
.svc-client--detail .svc-client__payment--paid { gap: 9px; margin-top: 10px; padding: 12px; }
.svc-client--detail .svc-client__payment-paid-rail { color: var(--svc-client-muted); font-size: .82rem; }
.svc-client--detail .svc-client__payment-paid-receipt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--svc-client-muted); font-size: .82rem; }
.svc-client--detail .svc-client__subservice small { display: block; margin-top: 5px; color: var(--svc-client-muted); }
.svc-client__action-dialog { position: fixed; inset: 0; width: min(440px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 32px)); overflow: auto; margin: auto; border: 2px solid #c3bed1; border-radius: 16px; }
.svc-client__action-form { gap: 12px; padding: 20px; }
.svc-client__action-form h2 { font-size: 20px !important; line-height: 1.3 !important; }
.svc-client__action-form textarea { min-height: 84px; }
.svc-client__action-dialog-actions { align-items: center; }
@media (max-width: 760px) {
    /* Lane F F4: :has() stays as progressive enhancement; the JS-toggled class twin below
       covers browsers without it. Keep both selectors in lockstep. */
    .svc-client-profile:has(.svc-client--detail) .content-wrapper, .svc-client-profile--has-detail .content-wrapper { flex-direction: column !important; align-items: stretch; }
    .svc-client-profile:has(.svc-client--detail) .svc-client-my__main, .svc-client-profile--has-detail .svc-client-my__main { flex: 0 0 auto; width: 100%; min-width: 0; align-self: stretch; }
    .svc-client-profile:has(.svc-client--detail) .client-my-listings__nav, .svc-client-profile--has-detail .client-my-listings__nav { width: 100%; align-self: stretch; }
    .svc-client--detail .svc-client__detail-grid { grid-template-areas: 'side' 'main'; grid-template-columns: minmax(0, 1fr); }
    [dir='rtl'] .svc-client--detail .svc-client__detail-grid { grid-template-areas: 'side' 'main'; grid-template-columns: minmax(0, 1fr); }
    .svc-client--detail .svc-client__detail-summary { grid-template-columns: minmax(0, 1fr); }
    .svc-client--detail .svc-client__detail-summary { padding: 16px; }
    .svc-client--detail .svc-client__detail-secondary { justify-content: stretch; }
    .svc-client--detail .svc-client__detail-secondary .svc-client__button { width: 100%; }
    .svc-client__action-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    .svc-client__action-form { padding: 18px; }
}
@media (max-width: 390px) {
    .svc-client--detail .svc-client__detail-summary,
    .svc-client--detail .svc-client__detail-current,
    .svc-client--detail .svc-client__detail-workspace,
    .svc-client--detail .svc-client__detail-journey,
    .svc-client--detail .svc-client__detail-help { padding: 14px; }
    .svc-client--detail .svc-client__detail-summary h1 { font-size: 20px !important; }
    .svc-client--detail .svc-client__detail-summary dl > div { display: grid; grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); }
    .svc-client--detail .svc-client__detail-summary dd { overflow-wrap: anywhere; }
    .svc-client--detail .svc-client__journey-copy { padding-inline-end: 0; }
}

/* Client Detail meeting workspace: one selected day and its available times. */
.svc-client--detail .svc-client__meeting { min-width: 0; border-width: 1.5px; border-color: #d6cde2; background: #fff; }
.svc-client--detail .svc-client__meeting--picker { gap: 14px; }
.svc-client--detail .svc-client__meeting--picker > h3 { color: var(--svc-client-ink); font-size: 1rem; font-weight: 800; }
.svc-client__meeting-week { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; gap: 8px; min-width: 0; }
.svc-client__meeting-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.svc-client__meeting-day, .svc-client__meeting-week-button { min-width: 0; min-height: 50px; border: 1px solid #d8d0e4; border-radius: 10px; color: #574a75; background: #fff; font: inherit; cursor: pointer; }
.svc-client__meeting-day { display: grid; align-content: center; gap: 2px; padding: 6px 4px; font-size: .78rem; font-weight: 700; text-align: center; }
.svc-client__meeting-day bdi { color: var(--svc-client-muted); font-size: .72rem; font-weight: 700; }
.svc-client__meeting-day:hover, .svc-client__meeting-day:focus-visible, .svc-client__meeting-week-button:hover:not(:disabled), .svc-client__meeting-week-button:focus-visible { border-color: var(--svc-client-primary); outline: 3px solid rgba(106, 93, 139, .14); outline-offset: 1px; }
.svc-client__meeting-day.is-selected { border-color: var(--svc-client-primary); color: #fff; background: var(--svc-client-primary); box-shadow: 0 5px 12px rgba(70, 53, 100, .16); }
.svc-client__meeting-day.is-selected bdi { color: #fff; }
.svc-client__meeting-week-button { display: grid; place-items: center; padding: 0; font-size: 1.55rem; font-weight: 500; }
.svc-client[dir='rtl'] .svc-client__meeting-week-button { transform: scaleX(-1); }
.svc-client__meeting-day:disabled, .svc-client__meeting-week-button:disabled, .svc-client__slot:disabled { cursor: wait; opacity: .58; }
.svc-client__meeting-week-button:disabled { cursor: not-allowed; }
.svc-client__meeting-day-panel { min-height: 64px; border-radius: var(--radius-surface); padding: 12px; background: #f8f6fb; }
.svc-client__meeting-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.svc-client__meeting-times .svc-client__slot { min-height: 44px; padding: 9px 12px; }
.svc-client__meeting-times .svc-client__slot.is-selected { border-color: var(--svc-client-primary); color: #fff; background: var(--svc-client-primary); }
.svc-client__meeting-empty { display: grid; min-height: 40px; place-items: center; color: var(--svc-client-muted); font-size: .88rem; text-align: center; }
.svc-client__meeting-state { display: flex; min-height: 40px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; color: var(--svc-client-muted); font-size: .88rem; text-align: center; }
.svc-client__meeting-state .svc-client__button { min-height: 40px; }
.svc-client__meeting-spinner { width: 18px; height: 18px; border: 2px solid #d5cce1; border-top-color: var(--svc-client-primary); border-radius: 50%; animation: svc-meeting-spin .7s linear infinite; }
@keyframes svc-meeting-spin { to { transform: rotate(360deg); } }
.svc-client__meeting-selection { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e1dbe9; padding-top: 13px; }
.svc-client__meeting-selection > div { display: grid; gap: 2px; min-width: 0; }
.svc-client__meeting-selection span { color: var(--svc-client-muted); font-size: .78rem; font-weight: 700; }
.svc-client__meeting-selection strong { overflow-wrap: anywhere; font-size: .92rem; }
.svc-client__meeting-selection .svc-client__button { flex: 0 0 auto; min-height: 44px; }
.svc-client__meeting-picker-cancel { justify-self: start; min-height: 44px; border: 0; padding: 7px 2px; color: var(--svc-client-primary); background: transparent; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }
.svc-client__meeting-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.svc-client__meeting-actions .svc-client__button { min-height: 44px; }
.svc-client__meeting-join-status { color: var(--svc-client-muted); font-size: .875rem; font-weight: 700; }
.svc-client__meeting-actions .svc-client__button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 640px) {
    .svc-client__meeting-week { grid-template-columns: 44px minmax(0, 1fr) 44px; }
    .svc-client__meeting-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .svc-client__meeting-day { min-height: 56px; }
    .svc-client__meeting-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-client__meeting-selection { align-items: stretch; flex-direction: column; }
    .svc-client__meeting-selection .svc-client__button, .svc-client__meeting-actions .svc-client__button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .svc-client__meeting-spinner { animation: none; } }
.svc-client__meeting-attendance { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid #d8d1e6; border-radius: 10px; background: #f7f5fa; color: var(--svc-client-ink); font-size: .875rem; }
.svc-client__meeting-attendance > span { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--svc-client-primary); box-shadow: 0 0 0 4px rgba(106, 93, 139, .12); }
.svc-client__meeting-inline-host { width: 100%; min-width: 0; }
@media (max-width: 760px) { .svc-client__meeting-attendance, .svc-client__meeting-actions, .svc-client__meeting-actions .svc-client__button { width: 100%; } }
.svc-client--detail .svc-client__gate-note { color: #854f0b; font-size: .74rem; }
.svc-client__completion-banner strong, .svc-client__completion-banner p, .svc-client__detail-current > span, .svc-client__detail-current h2, .svc-client__detail-current p { unicode-bidi: plaintext; }
.svc-client__rating p { unicode-bidi: plaintext; }
.svc-client__percent-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 24px; }.svc-client__percent-comparison div { min-width: 0; border: 1px solid #e1dbe8; border-radius: 10px; padding: 10px; }.svc-client__percent-comparison dt { color: #6e6878; font-size: .78rem; }.svc-client__percent-comparison dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 800; }
/* Every OTHER section of this card (header, dates, table, footer) breathes with 24px of inline
   padding; this one row-style class had none, so warranties/deliverables/site-visit sat flush
   against the card's own border while their neighbours did not — one more small reason the whole
   card read as cramped and inconsistent. */
.svc-client__proposal { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e7e1ed; margin: 0 24px; padding: 12px 0; }
/* The branded proposal PDF (2026-08-20): the one document on this card a customer must always be
   able to find and open. It used to share `.svc-client__proposal`'s quiet label+value row with
   warranties, deliverables and the site-visit date — four different facts in one identical style,
   with nothing marking which one was an actual openable file. Its own elevated block, a document
   icon, and placement right before the decision buttons so it reads as required reading, not one
   more line item. */
.svc-client__proposal-file { display: flex; align-items: center; gap: 14px; margin: 14px 24px 0; border: 2px solid #d8cdef; border-radius: 12px; padding: 14px 16px; background: #f6f2fb; }
.svc-client__proposal-file-icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; color: var(--svc-client-primary); box-shadow: inset 0 0 0 1px #e2d9f2; }
.svc-client__proposal-file-body { display: grid; gap: 4px; min-width: 0; }
.svc-client__proposal-file-body strong { color: #191638; font-size: .82rem; font-weight: 800; }
.svc-client__proposal-file-body .svc-client__text-link[data-svc-file-preview] { font-size: .98rem; font-weight: 800; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
/* What the customer is agreeing to by accepting: the staged installments, each checkable against
   the total above without doing arithmetic. Same bordered-panel weight as the deliverables
   checklist so the two read as siblings, not as one important section and one afterthought. */
/* 2026-08-20: payment plan / warranties / deliverables / site-visit used to each be their own
   floating bordered box — same border color and radius repeated four times with gaps in between,
   which read as four unrelated cards instead of one set of terms for this quote. They now render
   inside one shared panel (built in svc-client.js as `.svc-client__quote-details`) with a hairline
   divider between sections instead of restating the box chrome each time. */
.svc-client__quote-details { margin: 14px 24px 0; border: 1px solid #ded7e8; border-radius: 12px; background: #fff; overflow: hidden; }
.svc-client__quote-details > .svc-client__payment-plan, .svc-client__quote-details > .svc-client__proposal { margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px; }
.svc-client__quote-details > * + * { border-top: 1px solid #eee7f3; }
.svc-client__payment-plan { margin: 14px 24px 0; border: 1px solid #ded7e8; border-radius: 12px; padding: 14px 16px; background: #fff; }
.svc-client__payment-plan h4 { margin: 0 0 10px; color: #191638; font-size: .9rem; font-weight: 800; }
.svc-client__payment-plan-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.svc-client__payment-plan-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; border-top: 1px solid #f0edf4; padding: 9px 0; }
.svc-client__payment-plan-row:first-child { border-top: 0; padding-top: 0; }
/* Found testing at 430px: `min-width: 0` plus `overflow-wrap: anywhere` let this shrink to a
   one-character column when the figures beside it took their fixed space, wrapping the label into
   a vertical ladder instead of its normal 1-2 lines. A real floor stops that; overflow-wrap stays
   as a safety net for an actually-long single word, not the default behavior. */
.svc-client__payment-plan-label { min-width: 130px; overflow-wrap: anywhere; font-size: .88rem; font-weight: 700; }
.svc-client__payment-plan-figures { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; white-space: nowrap; }
.svc-client__payment-plan-figures strong { font-size: .95rem; font-weight: 800; }
/* The share percentage describes the phase (the label), not the money figure, so it now sits right
   after the label text instead of beside the amount on the other end of the row — still its own
   small pill so it doesn't fuse into the label's own text. */
.svc-client__payment-plan-percent { display: inline-flex; vertical-align: middle; color: var(--svc-client-muted); font-size: .74rem; font-weight: 800; background: #f3eefa; border-radius: 999px; padding: 2px 8px; }
.svc-client__lead-candidates { display: grid; gap: 12px; }.svc-client__lead-candidates > header { display: grid; gap: 3px; }.svc-client__lead-candidates > header h3, .svc-client__lead-candidates > header p { margin: 0; }
.svc-client__lead-candidates > header h3 { color: #191638; }
/* The provider's name sits one level under the section heading, not level with it. */
.svc-client__lead-candidate h3 { font-size: .94rem !important; font-weight: 800; color: #191638; line-height: 1.35; }
.svc-client__lead-candidate > header p { color: var(--svc-client-muted); font-size: .85rem; font-weight: 700; }
.svc-client__lead-candidate > header > div { display: grid; gap: 2px; justify-items: start; min-width: 0; }
/* The provider's two small links share one row: viewing their profile and taking them back off
   the shortlist are both quiet card actions. Stacked, they were two identical-looking links and
   the destructive one read as the card's main action. */
.svc-client__lead-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 3px; }
.svc-client__lead-candidate > header .svc-client__text-link { font-size: .82rem; }
/* Removing someone is a correction, not an invitation — same size, less pull than the profile link. */
.svc-client__text-link--quiet { color: var(--svc-client-muted); }
.svc-client__text-link--quiet:hover, .svc-client__text-link--quiet:focus-visible { color: #b03030; }
.svc-client__lead-candidate .svc-client__meeting-actions { margin-top: 12px; align-items: center; }.svc-client__lead-candidates > header p { color: var(--svc-client-muted); font-size: .88rem; font-weight: 700; }.svc-client__lead-candidate { min-width: 0; border: 1px solid #ded7e7; border-radius: 14px; padding: 14px; background: #fff; }.svc-client__lead-candidate > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.svc-client__lead-candidate h3, .svc-client__lead-candidate p { margin: 0; }.svc-client__lead-meeting { display: grid; gap: 10px; margin-top: 12px; border-radius: 10px; padding: 12px; background: #f7f4f9; }.svc-client__lead-meeting time { display: block; margin-top: 3px; direction: ltr; unicode-bidi: isolate; }.svc-client__lead-candidate .svc-client__quote { margin-top: 12px; box-shadow: none; }
/* `text-align: end` is logical — it follows the card's own dir, so AR needs no override. */
.svc-client__warranty-list { min-width: 0; overflow-wrap: anywhere; text-align: end; }
@media (max-width: 390px) { .svc-client__percent-comparison { grid-template-columns: 1fr; margin-inline: 16px; }.svc-client__warranty-list { text-align: start; }.svc-client__proposal, .svc-client__lead-candidate > header { align-items: flex-start; flex-direction: column; }.svc-client__lead-candidate, .svc-client__lead-meeting { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }.svc-client__proposal-file { margin-inline: 16px; }.svc-client__proposal-file { flex-direction: column; align-items: flex-start; }.svc-client__payment-plan-row { flex-direction: column; gap: 3px; }
    /* Found testing at 320px: the two flex children (label + total) have no min-width, so the flex
       algorithm let the label shrink down to one letter per line instead of just wrapping normally.
       Stacking them removes the fight over horizontal space entirely. */
    .svc-client__quote-footer { flex-direction: column; align-items: flex-start; gap: 4px; } }
.svc-client__quote-table td.svc-client__quote-line-summary { display: none; }
/* Real bug, caught on the actual desktop table: the ×N tag is only meant for the mobile stacked
   card — on desktop the table already has its own "Quantity" column, so the tag was printing the
   same "×1" a second time, jammed into the item name cell. Hidden by default; the mobile media
   query below turns it back on, mirroring how quote-line-summary itself is gated. */
.svc-client__quote-line-qty-tag { display: none; }
/* Keyed to the CARD's own width, not the viewport. The card renders both full-bleed and inside the
   request-detail page's narrow main column, where a 900px-wide desktop still only gives it ~560px —
   less than the table's own 580px min-width, so it was overflowing behind a horizontal scrollbar on
   a screen nobody would call "mobile". A container query stacks it whenever the card itself is too
   narrow for the table, whatever the viewport is doing. */
@container svc-quote-card (max-width: 600px) { .svc-client__quote-header, .svc-client__quote-dates, .svc-client__quote-footer, .svc-client__quote-actions { padding-inline: 16px; }.svc-client__percent-comparison, .svc-client__proposal-file, .svc-client__quote-details { margin-inline: 16px; }.svc-client__quote-actions .svc-client__button { width: 100%; }
    /* The 4-column line-items table (item / qty / unit price / total) does not fit a narrow card —
       it was shrinking into an unreadable strip with two columns scrolled out of view behind a
       hairline scrollbar nobody notices. Same fix already shipped for the "My services" table on
       this same page (`.svc-client__my-table` above): each row becomes its own bordered card. Unlike
       that table, qty/unit/amount collapse into one summary line under the item's name (title +
       one clear line) rather than three more label/value rows — see the rules below. */
    .svc-client__quote-table-wrap { overflow: visible; border: 0; }
    .svc-client__quote-table, .svc-client__quote-table tbody, .svc-client__quote-table tr, .svc-client__quote-table td { display: block; width: 100% !important; min-width: 0 !important; }
    .svc-client__quote-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Same border color/radius as the payment-plan and deliverables panels right below it (both
       #ded7e8 / 12px) — the price row is the most important line on this card and was the only
       one left unboxed, so it read as less important than the boxes under it. */
    .svc-client__quote-table tr { margin: 0 16px 12px; border: 1px solid #ded7e8; border-radius: 12px; padding: 14px 16px; background: #fff; width: auto !important; }
    .svc-client__quote-table tr:last-child { margin-bottom: 0; }
    /* 2026-08-20: the old layout repeated the "Line item" column header as a label over the item's
       own name, then stacked three more label/value rows for qty/unit/amount below it — a one-line
       offer read like a ledger. Now the name is the card's title and the one hidden summary column
       (qty × unit = amount, added in svc-client.js) is the only line under it. */
    .svc-client__quote-table td { border: 0; padding: 0; text-align: start; }
    .svc-client__quote-table td::before { content: none; }
    .svc-client__quote-table td label { display: flex; align-items: center; gap: 6px; text-align: start; }
    /* Hierarchy fix: the price was rendering smaller and greyer than the item name above it — on a
       card whose whole job is comparing prices, the number is the thing a glance should land on,
       not the label. Name stays the reference line; the figure gets the weight and the brand color
       the footer total already uses, so the eye goes there first. */
    .svc-client__quote-table td.svc-client__quote-line-name { font-weight: 700; font-size: .88rem; color: var(--svc-client-ink); margin-bottom: 4px; }
    .svc-client__quote-table td.svc-client__quote-line-qty, .svc-client__quote-table td.svc-client__quote-line-unit, .svc-client__quote-table td.svc-client__quote-line-amount { display: none; }
    .svc-client__quote-table td.svc-client__quote-line-summary { display: block; color: var(--svc-client-primary); font-size: 1.08rem; font-weight: 900; }
    /* Moved from beside the total to right before the title it actually describes ("×1 [item]",
       not "[price] ×1") — a small muted badge so it still reads as a quantifier, not part of the
       item's own name. */
    .svc-client__quote-line-qty-tag { display: inline-flex; margin-inline-end: 6px; padding: 1px 7px; border-radius: 6px; background: #f3eefa; color: var(--svc-client-muted); font-size: .74rem; font-weight: 800; vertical-align: middle; } }

/* ---- Reviewer assignment + tender review (scope 2026-07-24) ---- */
.svc-client__reviewer { display: grid; gap: 10px; }
.svc-client__reviewer-intro { margin: 0; color: #6e6878; font-size: .86rem; line-height: 1.5; }
.svc-client__reviewer-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.svc-client__reviewer-option { display: grid; gap: 4px; min-height: 44px; border: 1px solid #ded7e7; border-radius: 12px; background: #fff; padding: 12px 14px; text-align: start; cursor: pointer; }
.svc-client__reviewer-option.is-selected { border-color: #6a5d8b; background: #f0eef5; box-shadow: inset 0 0 0 1px #6a5d8b; }
.svc-client__reviewer-option:focus-visible { outline: 2px solid #6a5d8b; outline-offset: 2px; }
.svc-client__reviewer-option-title { color: #372a58; font-size: .92rem; font-weight: 800; }
.svc-client__reviewer-option.is-selected .svc-client__reviewer-option-title { color: #6a5d8b; }
.svc-client__reviewer-option-note { color: #6e6878; font-size: .82rem; font-weight: 400; line-height: 1.45; }
.svc-client__reviewer-option-flag { color: #785c13; font-size: .78rem; font-weight: 700; }
.svc-client__reviewer-option.is-empty { border-style: dashed; background: #faf9fb; cursor: not-allowed; }
.svc-client__reviewer-option.is-empty .svc-client__reviewer-option-title,
.svc-client__reviewer-option.is-empty .svc-client__reviewer-option-note { color: #8d8898; }
.svc-client__reviewer-single { display: grid; gap: 4px; border: 1px solid #ded7e7; border-radius: 12px; padding: 12px 14px; background: #faf9fc; }
.svc-client__reviewer-single strong { color: #372a58; font-size: .92rem; }
.svc-client__reviewer-single span { color: #6e6878; font-size: .82rem; line-height: 1.45; }
.svc-client__reviewer-disclosure { margin: 2px 0 0; border-radius: 10px; padding: 10px 12px; background: #f4f2f8; color: #4d465c; font-size: .82rem; line-height: 1.5; }
.svc-client__reviewer-empty { margin: 0; border: 1px dashed #ded7e7; border-radius: 10px; padding: 12px 14px; color: #6e6878; font-size: .85rem; line-height: 1.5; }
/* A2 option 3: self-certification collects nothing, so its body is one consequence line. */
.svc-client__reviewer-self { margin: 2px 0 0; border-radius: 10px; padding: 10px 12px; background: #f4f2f8; color: #4d465c; font-size: .82rem; line-height: 1.5; }
.svc-client__reviewer-external { display: grid; gap: 6px; }
.svc-client__reviewer-external label { font-size: .82rem; font-weight: 700; color: #372a58; }
.svc-client__reviewer-external input { border: 1px solid #ded7e7; border-radius: var(--radius-control); padding: 10px 12px; font-size: .92rem; width: 100%; box-sizing: border-box; }
/* Was outline-off plus a 1px border colour change and nothing else. Every other input on this
   sheet already rings with the halo (line 360) — this one was the exception, not a variant. */
.svc-client__reviewer-external input:focus { outline: none; border-color: #6a5d8b; box-shadow: 0 0 0 3px rgba(106, 93, 139, .13); }
.svc-client__reviewer-active { display: grid; gap: 6px; }
.svc-client__reviewer--prefill { border: 1px dashed #6a5d8b; border-radius: 12px; padding: 12px; }
.svc-client__reviewer-prefill-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.svc-client__reviewer { display: grid; gap: 6px; border: 1px solid #e7e1ed; border-radius: 10px; padding: 10px 12px; background: #faf9fc; margin-bottom: 12px; }
.svc-client__reviewer .svc-client__reviewer-line { border: 0; border-radius: 0; padding: 0; background: none; margin-bottom: 0; }
.svc-client__reviewer-hint { margin: 0; color: #6e6878; font-size: .86rem; line-height: 1.5; }
.svc-client__reviewer-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid #e7e1ed; border-radius: 10px; padding: 10px 12px; background: #faf9fc; margin-bottom: 12px; }
.svc-client__reviewer-line small { color: #6e6878; font-weight: 700; }
.svc-client__reviewer-line strong { unicode-bidi: plaintext; }
.svc-client__tender-blocked { margin: 0; color: #8a5a12; font-size: .88rem; }
.svc-client__tender { border: 1px solid #ded7e7; border-radius: 14px; padding: 14px; background: #fff; display: grid; gap: 10px; margin-bottom: 14px; }
.svc-client__tender h3 { margin: 0; font-size: 1rem; }
.svc-client__tender-loading { display: flex; align-items: center; gap: 8px; color: #6e6878; margin: 0; }
.svc-client__tender-ranks { display: grid; gap: 8px; }
.svc-client__tender-rank { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e7e1ed; border-radius: 10px; padding: 10px; }
.svc-client__tender-rank-badge { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #6a5d8b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.svc-client__tender-rank div { display: grid; gap: 2px; min-width: 0; }
.svc-client__tender-rank small { color: #6e6878; overflow-wrap: anywhere; }
.svc-client__tender-comment { margin: 0; color: #372a58; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.svc-client__tender--stale { border-color: #f0c36d; }
.svc-client__work-confirm { border: 1px solid #ded7e7; border-radius: 14px; padding: 14px; background: #f7f4f9; display: grid; gap: 8px; }
.svc-client__work-confirm h3 { margin: 0; }
.svc-client__work-confirm p { margin: 0; color: #6e6878; }
.svc-client__work-confirm .svc-client__button { justify-self: start; }
[dir="rtl"] .svc-client__work-confirm .svc-client__button { justify-self: start; }
@media (max-width: 390px) {
    .svc-client__reviewer-options { grid-template-columns: 1fr; }
    .svc-client__reviewer-prefill-actions { flex-direction: column; align-items: stretch; }
    .svc-client__tender-rank { flex-wrap: wrap; }
    .svc-client__work-confirm .svc-client__button { justify-self: stretch; width: 100%; }
}

/* Milestone schedule (2026-07-25): the partner's planned start/end on each journey milestone,
   plus a plain late marker. Display only — it never restyles the engine state class. */
.svc-client--detail .svc-client__journey-copy small.svc-client__journey-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--svc-client-muted); font-size: .74rem; }
.svc-client--detail .svc-client__journey-schedule .svc-client__chip { padding: 2px 7px; font-size: .68rem; }
.svc-client__chip--late { color: #904044; background: #fae5e6; }
/* The payment marker on a journey step, and the figure beside it. Same line box as the schedule row
   directly above it — nothing here restyles the journey; it only lets the marker and its amount sit
   on one wrapping line instead of stacking. */
.svc-client--detail .svc-client__journey-copy small.svc-client__journey-payment { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--svc-client-muted); font-size: .74rem; }
.svc-client--detail .svc-client__journey-payment .svc-client__chip { padding: 2px 7px; font-size: .68rem; }
.svc-client--detail .svc-client__journey-payment strong { color: var(--svc-client-ink); }
.svc-client__chip--payment { color: #365d86; background: #eef5ff; }

/* Box chrome (border/margin/padding/background) comes from `.svc-client__quote-details > .svc-client__proposal`
   above — deliverables is always rendered inside that shared panel, this rule only owns its internal
   title/list layout. */
.svc-client__deliverables { display: grid; gap: 6px; }
.svc-client__deliverables > strong { font-size: .95rem; color: #191638; }
.svc-client__deliverables-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.svc-client__deliverables-item { display: flex; align-items: flex-start; gap: 8px; color: #3d3750; font-size: .86rem; line-height: 1.5; }
.svc-client__deliverables-item svg { flex: 0 0 auto; margin-top: 2px; color: var(--svc-client-primary, #6A5D8B); }
.svc-client__deliverables-panel { margin-top: 14px; border: 1px solid #ded7e8; border-radius: 12px; padding: 14px 16px; background: #fff; }
.svc-client__deliverables-panel h3 { margin: 0 0 10px; font-size: .95rem; }
.svc-client__deliverables-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.svc-client__deliverable { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; border-inline-start: 3px solid #cfc4df; padding-inline-start: 10px; font-size: .88rem; }
.svc-client__deliverable--in { border-inline-start-color: #2f6b46; }
.svc-client__deliverable--missing { border-inline-start-color: #d9b25a; }
.svc-client__deliverable-title { font-weight: 700; }
.svc-client__deliverable-pending { color: #8a7333; font-size: .82rem; font-weight: 700; }

/* The change-reason box stays out of sight until the customer actually asks for a change (ADR-55
   follow-up). The class sets display:grid, so the [hidden] rule must come after it or the box
   would render regardless of the attribute. */
.svc-client__reason { display: grid; gap: 7px; font-weight: 800; }
.svc-client__reason[hidden] { display: none; }

/* Catalogue category filter (#10, 2026-07-28). Chips rather than a select: with five categories a
   customer sees every option at once, and the active one is visible without opening anything. */
.svc-client__catalog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.svc-client__catalog-chip { border: 1px solid #d8d2e0; border-radius: var(--radius-pill); padding: 7px 16px; color: #574a75; background: #fff; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.svc-client__catalog-chip:hover { background: #f4f1fa; }
.svc-client__catalog-chip.is-active { border-color: var(--svc-client-primary, #6a5d8b); color: #fff; background: var(--svc-client-primary, #6a5d8b); }
/* Offer sorting (#9). Sits above the cards it reorders. */
.svc-client__offer-sort { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.svc-client__offer-sort label { display: inline-flex; align-items: center; gap: 8px; color: #574a75; font-size: .84rem; font-weight: 700; }
.svc-client__offer-sort select { border: 1px solid #d8d2e0; border-radius: var(--radius-control); padding: 7px 11px; color: var(--svc-client-ink, #372a58); background: #fff; font: inherit; font-size: .84rem; }

/* Post-service notification (2026-07-28): the button a client presses on a finished request to
   tell their provider something changed. Shares the suggestions surface because it belongs to the
   same moment, but reads as an ACTION — the sent state is deliberately quiet text, not a button,
   so nobody hunts for a second press. */
.svc-client__suggestions--notify .svc-client__post-notify {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.svc-client__post-notify-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 420px;
    font-size: 0.875rem;
}
.svc-client__post-notify-note textarea {
    width: 100%;
    resize: vertical;
}
.svc-client__post-notify--sent {
    margin: 0;
    color: #0F6E56;
    font-weight: 500;
}

/* Service page journey. The site resets list-style globally, so an <ol> here renders as plain lines and the
   sequence — the whole point of showing the journey before someone commits — disappears. Number it back. */
.svc-client__service-journey ol {
    list-style: decimal;
    padding-inline-start: 1.5rem;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.svc-client__service-journey li {
    list-style: decimal;
    line-height: 1.6;
}

/* Site visit (2026-07-29 sweep). This section carried the visit date and the provider's report
   with NO padding, border, background or radius — the only content block on a request page that
   was not a card, so the report ran flush against the step above it. Same treatment as
   .svc-client__lead-meeting, which holds the same small/strong label-value shape. */
.svc-client__site-visit { display: grid; gap: 10px; margin-top: 12px; border-radius: 10px; padding: 12px; background: #f7f4f9; }
.svc-client__site-visit > div { display: grid; gap: 3px; min-width: 0; }
.svc-client__site-visit small { color: var(--svc-client-muted); font-size: .78rem; font-weight: 700; }
.svc-client__site-visit strong { font-size: .94rem; font-weight: 800; }
.svc-client__site-visit p { margin: 0; font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.svc-client__site-visit-review { margin-top: 10px; }

/* Touch targets (2026-07-29 sweep, measured at 375px). The category chips came out 37px tall and
   the dialog close 38px — under the 44px a thumb reliably hits, and the chips sit in a tight row
   where a miss selects the neighbouring filter. Height only; the widths were already fine. */
@media (max-width: 640px) {
    .svc-client__catalog-chip { min-height: 44px; }
    .svc-client__request-dialog-header button { flex-basis: 44px; width: 44px; height: 44px; }
}

/* Services popups sit OUTSIDE .svc-client — a <dialog> is appended near the end of the document,
   so none of the ladder above reaches them and they fall back to the global heading size. Rather
   than patch each popup as it turns up, every services popup is named here once and gets the same
   ladder as the pages. Add a new services dialog class to this list and it inherits the ladder. */
/* .svc-client__catalog-estimator-modal is gone from this list on purpose: the estimator dialog is a
   .svc-client__request-dialog now, so it is already named by the first selector of every rule here. */
.svc-client__request-dialog h1, .svc-client__action-dialog h1,
.svc-client__location-dialog h1, .svc-client__location-sheet h1 {
    font-size: 1.25rem !important; font-weight: 800; line-height: 1.35;
}
.svc-client__request-dialog h2, .svc-client__action-dialog h2,
.svc-client__location-dialog h2, .svc-client__location-sheet h2,
.svc-client__request-dialog h3, .svc-client__action-dialog h3,
.svc-client__location-dialog h3, .svc-client__location-sheet h3 {
    font-size: 1rem !important; font-weight: 800; line-height: 1.35;
}
.svc-client__request-dialog h4, .svc-client__action-dialog h4,
.svc-client__location-dialog h4, .svc-client__location-sheet h4 {
    font-size: .94rem !important; font-weight: 800; line-height: 1.35;
}

/* The request dialog's own title is the title of that surface, so it stays at the h1 size — the
   blanket popup rule above would otherwise demote it to a section heading. Declared after it
   because the two selectors have equal specificity and order decides. */


/* Inline actions need an affordance. These were coloured bold text with no underline, no padding
   and no background — nothing on the card said they could be clicked, so "عرض الملف" read as a
   label sitting under the provider's name. An underline is the one affordance every reader already
   knows for interactive text, and it costs no layout. Offset so Arabic descenders stay legible. */
.svc-client__lead-candidate .svc-client__text-link,
.svc-client__lead-links .svc-client__text-link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}
.svc-client__lead-candidate .svc-client__text-link:hover,
.svc-client__lead-candidate .svc-client__text-link:focus-visible {
    text-decoration-thickness: 2px;
}

/* ---- P11: the designer's estimate, above the offers ----------------------------------------------
   A column of construction bids is unreadable without the number the design office said the work
   should cost. Styled as a REFERENCE rather than a figure of the customer's own: quiet card, the
   estimate large enough to compare against at a glance, and an explicit line saying it is theirs
   alone — because the one thing a customer must never assume is that the bidders saw it too.
   Logical properties so the accent sits correctly in Arabic without an [dir] override. */
.svc-client__boq-strip { border: 1px solid #e0dbe9; border-inline-start: 3px solid #7fa7c4; border-radius: 14px; background: #f9fbfd; padding: 12px 16px; margin-bottom: 12px; display: grid; gap: 6px; }
.svc-client__boq-strip header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.svc-client__boq-strip-label { color: #2f5c78; font-size: .82rem; font-weight: 800; }
.svc-client__boq-strip-value { font-size: 1.15rem; color: var(--svc-client-ink, #372a58); }
.svc-client__boq-strip-readout { margin: 0; font-size: .9rem; font-weight: 700; color: var(--svc-client-ink, #372a58); }
.svc-client__boq-strip-note { margin: 0; color: var(--svc-client-muted, #6f6788); font-size: .8rem; line-height: 1.5; }
.svc-client__boq-strip-docs summary { cursor: pointer; color: #2f5c78; font-size: .82rem; font-weight: 700; }
.svc-client__boq-docs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }

/* 2026-08-21 — the provider's mark on a quote or shortlist card. A client comparing three offers
   reads the logos before the names, so the mark leads the header. Partners without one get their
   initial in the card's own palette rather than a grey placeholder, which is quieter than a broken
   image and still distinguishes one card from the next. */
.svc-client__partner-mark { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; border: 1px solid #e2dcec; background: #faf9fd; }
.svc-client__partner-mark img { width: 100%; height: 100%; object-fit: contain; }
.svc-client__partner-mark--initial { color: var(--svc-client-primary); background: #f2edf9; border-color: #e0d5f0; font-size: 1.25rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.svc-client__lead-candidate .svc-client__partner-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; }
@container svc-quote-card (max-width: 600px) { .svc-client__partner-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 1.05rem; } }

/* ---- 2026-08-21 — the meeting row, the room inside it, and the shortlist card around both ------- */

/* A meeting offers three ways forward at once, so the row that holds them has to read as one row.
   It was measuring 44px, 44px and 24px: the cancel control is a bare <button> and the page reset
   leaves it with no box at all, so it hung between two pills with nothing to line up against and
   no target a thumb could reliably hit. Every control now shares the row's height and its centre
   line. Declared after the block that owns this class because the two selectors have equal
   specificity and order decides. */
.svc-client__meeting-actions { align-items: center; gap: 10px; }
/* `.svc-client__button--secondary` carries `margin-top: auto` for the card footers it was written
   for. In a row that is not centred that auto margin wins over align-items and drops the outlined
   button off the shared baseline, which is exactly what «إعادة جدولة» was doing. */
.svc-client__meeting-actions .svc-client__button--secondary { margin-top: 0; }
/* Cancelling is the quietest of the three and the only destructive one, so it keeps its text
   treatment but stops looking like a button nobody finished: a real 44px target, the muted ink the
   rest of the page uses for secondary copy, and the far end of the row to itself so the distance
   from the two pills reads as deliberate. It turns red only on the way to being pressed.
   The size carries `!important` for the same reason the heading ladder at the top of this file does:
   typography.css pins EVERY <button> at 16px/700 with `!important`, so a quiet control that happens
   to be a button cannot be quieter than a primary one without matching it. */
.svc-client__meeting-actions > .svc-client__text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-inline-start: auto; padding-inline: 4px; color: var(--svc-client-muted); font-size: .86rem !important; }
.svc-client__meeting-actions > .svc-client__text-link:hover, .svc-client__meeting-actions > .svc-client__text-link:focus-visible { color: #9d4058; }
/* Below 760px the two pills already go full width and stack, so there is no row left to sit at the
   end of — the auto margin would only push the link to the far edge of its own line. */
@media (max-width: 760px) { .svc-client__meeting-actions > .svc-client__text-link { width: 100%; margin-inline-start: 0; } }

/* The Whereby room renders inside the meeting block, inside a candidate card, inside the detail
   workspace column — and at 16/9 that chain left the stage about 330px tall, less than the height
   Whereby's own interface needs to lay itself out. The room answered by scrolling and clipping
   itself inside a box that still had room to grow, which is the scrollbar and the cut-off room the
   customer was looking at. A floor tall enough for the room's own chrome, a ceiling so the call
   never swallows the page, and a slightly taller ratio in between. The fullscreen rules in inline-meeting-room.css are more
   specific and still win, so going fullscreen behaves as before. */
.svc-client .aq-inline-meeting__stage { aspect-ratio: 16 / 10; min-height: min(420px, 68vh); max-height: 76vh; }
/* The loader stands where the room will stand, so it reserves the same height — otherwise the card
   jumps by 140px at the moment the call connects. `.is-error` is more specific and keeps its own
   short box, which is right: an error message is not a video call. */
.svc-client .aq-inline-meeting__loader { min-height: min(420px, 68vh); }
/* The host is the last box before the room and the one that has to promise it will not push the
   page sideways: the grid it sits in already provides the gap above it, so the embed's own top
   margin was only doubling that. */
.svc-client__meeting-inline-host { max-width: 100%; box-sizing: border-box; }
.svc-client__meeting-inline-host .aq-inline-meeting { max-width: 100%; margin-top: 0; }

/* A shortlist card exists to be compared with the two cards under it, so the same thing has to sit
   in the same place on all three. `justify-content: space-between` over three children was spreading
   the mark, the name block and the status chip to three different edges, and because the name block
   was only as wide as its own text it floated in the middle of the card with the profile control
   stranded under it. Letting the middle block absorb the free space instead puts the mark, the name
   and the provider type together at the start of the header and leaves the chip alone at the end,
   where a status belongs — in both directions, since flex follows the card's own dir. */
.svc-client__lead-candidate > header > div { flex: 1 1 auto; }
.svc-client__lead-candidate > header > .svc-client__chip { flex: 0 0 auto; }
/* «عرض الملف» describes the provider whose name it sits under, not the request, so it reads as a
   companion to the name. At the full button height it was the loudest thing on the card after the
   card's own primary action and competed with it. It keeps the 44px height below the thumb-target
   breakpoint, where it is a real touch target rather than a label. Both sizes need `!important` to
   get past typography.css, which is also why the `.82rem` asked for on the remove link a few rules
   above this one had never rendered. */
.svc-client__lead-links .svc-client__button--secondary { min-height: 36px; margin-top: 0; padding: 6px 12px; border-radius: 8px; font-size: .84rem !important; }
/* Removing a provider from the shortlist is small text next to a small button, so it takes the same
   box height as the control beside it — one row, one height, and a target rather than a word. */
.svc-client__lead-links .svc-client__text-link { display: inline-flex; align-items: center; min-height: 36px; font-size: .82rem !important; }
@media (max-width: 640px) { .svc-client__lead-links .svc-client__button--secondary, .svc-client__lead-links .svc-client__text-link { min-height: 44px; } }
/* Every card ends the same way: one primary action on its own row, hairline-separated from the
   provider above it, so reading down a shortlist means reading the same shape three times instead
   of hunting for the button. The child combinator keeps this off the action row inside the meeting
   block, which belongs to the meeting and not to the card. */
.svc-client__lead-candidate > .svc-client__meeting-actions { border-top: 1px solid #f0edf4; padding-top: 12px; }
.svc-client__lead-candidate > .svc-client__meeting-actions .svc-client__button { min-width: 172px; }
/* Stacked, the header has no row for the chip to sit at the end of, so it returns to the start with
   everything else. */
@media (max-width: 390px) { .svc-client__lead-candidate > header > .svc-client__chip { align-self: flex-start; } }

/* 2026-08-21 — a standing ask from the provider to change a milestone's price, on the journey row.
   Amber because it is a question and not a fault, and it carries weight because the owner is being
   asked for money: the old figure struck through beside the new one, so the size of the ask reads
   without arithmetic. */
.svc-client__revision { display: block; margin-top: 8px; border-inline-start: 3px solid #d9a441; border-radius: 0 10px 10px 0; padding: 10px 12px; background: #fffaf0; }
.svc-client__revision > strong { display: block; color: #7a5a12; font-size: .84rem; font-weight: 800; }
.svc-client__revision-amounts { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.svc-client__revision-amounts s { color: var(--svc-client-muted); }
.svc-client__revision-amounts b { color: var(--svc-client-ink); font-size: 1.08rem; font-weight: 900; }
.svc-client__revision em { display: block; margin-top: 6px; color: var(--svc-client-muted); font-size: .84rem; font-style: normal; line-height: 1.6; }
.svc-client__revision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.svc-client__button--small { min-width: 0; min-height: 36px; margin-top: 0; padding-inline: 14px; font-size: .84rem; }
/* Ported from the provider workspace: the customer's page refetches everything after every action
   and that is five to six seconds against a remote database. Without this the page simply goes
   quiet for all of it. */
.svc-client__busy-scope { position: relative; isolation: isolate; }
.svc-client__busy-overlay { position: absolute; inset: 0; z-index: 30; display: grid; min-width: 0; place-items: center; border-radius: inherit; padding: 20px; background: rgba(248, 247, 250, .82); cursor: progress; }
.svc-client__busy-message { display: flex; max-width: min(360px, 100%); align-items: center; gap: 10px; border: 2px solid var(--svc-client-primary); border-radius: 12px; padding: 12px 16px; color: var(--svc-client-ink); background: #fff; box-shadow: 0 8px 22px rgba(70, 53, 100, .1); text-align: center; }
.svc-client__busy-message span { width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid #d9d2e6; border-top-color: var(--svc-client-primary); border-radius: 50%; animation: svc-client-spin .8s linear infinite; }
.svc-client__busy-message strong { min-width: 0; overflow-wrap: anywhere; font-size: .88rem; }
@keyframes svc-client-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .svc-client__busy-message span { animation: none; } }
/* The approval packet's supporting-document picker, mounted inside the service screen. Same shape as
   the payment and contract pickers above: the label is the button, the native input is out of the
   visual flow but focusable, and the chosen name sits beside it. */
.svc-approval__picker-label { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; border: 1px solid var(--svc-client-primary); border-radius: 10px; padding: 9px 16px; background: #fff; color: var(--svc-client-primary); cursor: pointer; font-size: .86rem; font-weight: 800; }
.svc-approval__picker-label::before { content: "\2191"; font-weight: 900; }
.svc-approval__picker-label:hover { background: #f4f1f9; }
.svc-approval__field:has(.svc-approval__picker-input:focus-visible) .svc-approval__picker-label { outline: 2px solid var(--svc-client-primary); outline-offset: 2px; }
.svc-approval__picker-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.svc-approval__picker-name { min-height: 20px; color: var(--svc-client-ink); font-size: .82rem; font-weight: 700; overflow-wrap: anywhere; }