: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-client 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-client__chip { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; 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; }
.svc-client__chip--replaced,.svc-client__chip--none,.svc-client__chip--draft { 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; }
.svc-client__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 { background: #574a75; }.svc-client__button--secondary { 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 { overflow: hidden; border: 1px solid #e7e1ee; 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 { 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: 20px 22px 12px; }.svc-client__quote-header h3 { margin: 0; font-size: 1.04rem; 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 22px 16px; 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: 11px 14px; 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: 16px 22px; }.svc-client__quote-total { color: var(--svc-client-primary); font-size: 1.05rem; }.svc-client__quote-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 22px 21px; }.svc-client__quote-actions .svc-client__button { min-width: 126px; margin-top: 0; }.svc-client__chip--submitted { color: #785c13; background: #fff5d5; }.svc-client__chip--accepted { color: #336b45; background: #e2f4e8; }.svc-client__chip--rejected { color: #904044; background: #fae5e6; }
.svc-client__latin-value { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svc-client__money { display: inline-flex; align-items: center; gap: 5px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.svc-client__money--symbol-first { direction: rtl; }
.svc-client__money .fin-currency-sar-wrap { display: inline-flex; flex: 0 0 auto; align-items: center; color: currentColor; }
.svc-client__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: 9px; 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: 9px; 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: 10px; 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-shell { width: min(1240px, 100%); }.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 { position: relative; display: block; flex: 1 1 260px; min-width: 220px; }.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-search input { width: 100%; min-height: 44px; padding: 10px 14px 10px 42px; border: 1px solid #e0d9e9; border-radius: 12px; background: #faf9fd; color: var(--svc-client-ink); font: inherit; outline: none; }.svc-client[dir="rtl"] .svc-client__catalog-search input { padding: 10px 42px 10px 14px; }.svc-client__catalog-search input:focus { border-color: var(--svc-client-primary); box-shadow: 0 0 0 3px rgba(106, 93, 139, .14); }.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: 999px; 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-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.svc-client__catalog-card { display: flex; min-width: 0; overflow: hidden; border: 1px solid #e7e1ee; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(70, 53, 100, .07); }.svc-client__catalog-cover { position: relative; display: grid; flex: 0 0 37%; min-height: 224px; overflow: hidden; place-items: center; background: linear-gradient(135deg, #e9e4f2, #cfc4e1); color: #6A5D8B; }.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-cover-fallback svg { width: 54px; height: 54px; }.svc-client__catalog-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 20px; }.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-cta { width: 100%; margin-top: auto; text-decoration: none; }.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: 9px; 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: 999px; 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:9px; 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: 9px; 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: 7px; 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; }
.svc-client__catalog-clear:hover, .svc-client__catalog-clear:focus-visible { color: #4f174e; background: #f3f1f7; outline: none; }
.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(auto-fit, minmax(300px, 360px)); grid-auto-rows: 1fr; align-items: stretch; justify-content: center; gap: 20px; }
.svc-client__catalog-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; border: 1px solid #d8d0df; border-radius: 12px; background: #fff; 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: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; flex: none; width: 100%; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; place-items: center; background: #eeeaf5; color: #837498; }
.svc-client__catalog-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-client__catalog-cover-fallback { 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: 14px; text-align: center; }
/* 4 lines, not 2. These descriptions run 300-420 characters and two lines cut them mid-sentence
   — "...ليكون عينك الفنية في الموقع: الاستلام…" — so the card could not say what the service
   actually includes, which is the whole job of this list. The min-height keeps short and long
   descriptions on the same baseline so the buttons still line up across the row. */
.svc-client__catalog-description { display: -webkit-box; min-height: 5.4em; margin: 0; overflow: hidden; color: var(--svc-client-muted); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.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: auto; 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: 999px; 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: 999px; 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-embed .svc-client__request-form { margin: 0; padding: 0; box-shadow: none; }
.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: 999px; 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; }
.svc-client__multi-chips button:hover, .svc-client__multi-chips button:focus-visible { background: #ded7e8; outline: none; }
.svc-client__upload { display: grid; gap: 10px; }
.svc-client__upload > input[type='file'] { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.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-trigger:focus-within { border-color: var(--svc-client-primary); background: #f4f1f8; }
.svc-client__upload-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; 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-item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-client__upload-item button { border: 0; padding: 5px 7px; color: #9d4058; background: transparent; font: inherit; font-size: .8rem; font-weight: 800; 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; }
.svc-client__location-open { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--svc-client-primary); border-radius: 10px; padding: 9px 14px; color: #fff; background: var(--svc-client-primary); 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); }
.svc-client__location-sheet { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.svc-client__location-sheet > 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 { margin: 0; font-size: 1.1rem; }
.svc-client__location-sheet > 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; }
.svc-client__location-sheet > footer { position: sticky; bottom: 0; display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; border-top: 1px solid #e5dfea; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
.svc-client__location-sheet > footer .svc-client__button { min-width: 150px; margin: 0; }
.svc-client__button:disabled { cursor: not-allowed; opacity: .55; }
.svc-client__button.is-loading:disabled { cursor: wait; opacity: .9; }
.svc-client__button.is-loading::after { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
.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: 999px; 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; } }
@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; }
    /* 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: 10px;
    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);
}

.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;
}

.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;
}

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

.svc-client--my .svc-client__my-table th:nth-child(1),
.svc-client--my .svc-client__my-table td:nth-child(1) { width: 18%; }
.svc-client--my .svc-client__my-table th:nth-child(2),
.svc-client--my .svc-client__my-table td:nth-child(2) { width: 27%; }
.svc-client--my .svc-client__my-table th:nth-child(3),
.svc-client--my .svc-client__my-table td:nth-child(3) { width: 20%; }
.svc-client--my .svc-client__my-table th:nth-child(4),
.svc-client--my .svc-client__my-table td:nth-child(4) { width: 20%; }
.svc-client--my .svc-client__my-table th:nth-child(5),
.svc-client--my .svc-client__my-table td:nth-child(5) { width: 15%; }

.svc-client--my .svc-client__my-details {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    color: var(--svc-client-primary);
    font-weight: 800;
    text-decoration: none;
}

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

.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;
    }

    .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 {
        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: 8px; 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: 999px; 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: 11px; 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 0; }.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; }.svc-client__proposal { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e7e1ed; padding: 12px 0; }
.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; }.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; } }

/* ---- 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: 10px; padding: 10px 12px; font-size: .92rem; width: 100%; box-sizing: border-box; }
.svc-client__reviewer-external input:focus { outline: none; border-color: #6a5d8b; }
.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; }

.svc-client__deliverables { display: grid; gap: 4px; }
.svc-client__deliverables-count { color: var(--svc-client-primary, #6A5D8B); font-weight: 800; }
.svc-client__deliverables-list { color: #706b7b; font-size: .86rem; line-height: 1.7; }
.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: 999px; 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: 9px; 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; }