/*
 * The client's service requests (brief 268) on the client layout, and the admin's read of one request. The form, the
 * path and the file fields are the editor's preview (library.css and flows.css under .kh-lib.kh-flow); this file adds the
 * page around them: the title, the service and request cards, the facts of a request, its files, the actions and the
 * errors, the services search and the assistant «المهندس أحمد» (brief 293). Right to left first; one column at 375px.
 * typography.css sets every <p> to 16px, weight 400 and line height 1.625 with !important (qa-63 3), so the size,
 * weight and line height of a class that styles a <p> here carry !important too, and win by their class.
 */
.kr-page { min-width: 0; padding: 0 0 2.5rem; color: var(--kh-ink-2); }
.kr-page [hidden], .kh-flow [hidden] { display: none !important; }
.kr-page *, .kr-page *::before, .kr-page *::after { box-sizing: border-box; }
.kr-main { min-width: 0; }
/* Rework 521: clientProfile.css (loaded for the client menu, brief 508) centres .profile .left; the services column keeps its width. */
.kr-shell .left.kr-main { align-items: stretch; justify-content: flex-start; }
/* The services list (owner, 2026-10-07): no side menu, the list takes the full width. */
.kr-shell--wide .content-wrapper { display: block !important; }
.kr-shell--wide .left.kr-main { width: 100% !important; max-width: 100% !important; align-items: stretch !important; justify-content: flex-start !important; }
/* Brief 340: the services pages at the platform's page width (the partner's page's), with a 16px side margin. */
.kr-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 16px 56px; min-width: 0; box-sizing: border-box; }

/* Brief 340: «الخدمات | مقدمو الخدمات», two tabs under the title. Brief 377: the line drawn inside the bar, so the tab's
   mark covers it without sticking out below, and never a vertical scrollbar beside the tabs. */
.kr-tabs { display: flex; gap: .25rem; margin: 0 0 1rem; box-shadow: inset 0 -1px 0 var(--kh-line); overflow-x: auto; overflow-y: hidden; }
.kr-tabs__tab { flex: 0 0 auto; padding: .65rem 1rem; border-bottom: 3px solid transparent; color: var(--kh-muted); font-size: max(12px, .9375rem); font-weight: 700; text-decoration: none; white-space: nowrap; }
.kr-tabs__tab:hover { color: var(--kh-ink); }
.kr-tabs__tab[aria-current="page"] { border-bottom-color: var(--kh-primary); color: var(--kh-primary-600); }
.kr-tabs__tab:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: -3px; border-radius: 8px; }
/* Brief 944: «خدماتي»'s two lists as two tabs in the same look (buttons, aria-selected), its list under them. */
button.kr-tabs__tab { min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: none; font-family: inherit; line-height: 1.3; cursor: pointer; }
.kr-tabs__tab[aria-selected="true"] { border-bottom-color: var(--kh-primary); color: var(--kh-primary-600); }
.kr-mine-tabs { margin-bottom: .75rem; }
.kr-mine-none { margin: 0; padding: 1rem; border: 1px dashed var(--kh-line); border-radius: 14px; background: #fff; text-align: center; font-size: max(12px, .9375rem) !important; color: var(--kh-muted); }
.kr-typed { margin: 0 0 1rem; font-size: max(12px, .9375rem) !important; font-weight: 700 !important; line-height: 1.6 !important; color: var(--kh-ink); }
.kr-typed .kh-link { margin-inline-start: .5rem; }

.kr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.kr-title { margin: .5rem 0 .35rem; font-size: 1.5rem; font-weight: 800; line-height: 1.4; color: var(--kh-ink); overflow-wrap: anywhere; }
/*
 * Briefs 818 and 828: a request's one title (offers-core requestTitleHtml), the service then its number, the number a
 * quieter tag beside it with nothing between them that a line could end on. One rule for every page that draws it: the
 * client's request, the partner's work and opportunity and the admin's request all load this file.
 */
.kh-title__flow + .kh-num { font-weight: 600; opacity: .8; }
/*
 * Brief 869: the official riyal symbol beside an amount (offers-core amountMarks), in its text's colour and size (1em),
 * never parted from its number; its word is read by a screen reader only. An amount inside a sentence (.kh-money) keeps
 * the sentence's own size and weight, beating typography.css's «p *:not(strong)…» (0,0,7) with a class. Every services
 * page loads this file.
 */
.kh-money { white-space: nowrap; unicode-bidi: isolate; }
.kh-money, .kh-money bdi, .kh-sar, .kh-sar .partner-buy-sar-svg { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.kh-sar { white-space: nowrap; }
.kh-sar .partner-buy-sar-svg { display: inline-block; vertical-align: -.125em; }
.kh-sar__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kr-hint { margin: 0 0 1.1rem; font-size: max(12px, .9375rem) !important; font-weight: 500 !important; line-height: 1.6 !important; color: var(--kh-muted); }
.kr-status { margin: 2rem 0; font-size: max(12px, .9375rem) !important; text-align: center; color: var(--kh-muted); }

/* The form and a request: one card per section, one gap between them. */
.kr-detail { display: grid; gap: .85rem; min-width: 0; }
.kr-q { min-width: 0; }
.kr-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; margin-top: 1.1rem; }

/* Brief 437 (UX 428): a neutral word above the offers («نتحقق من حالة الدفع»), neither success nor error. */
.kr-note { margin: 0 0 .75rem; padding: .7rem .9rem; border-radius: 12px; background: #f2f2f5; color: var(--kh-ink-2); font-size: max(12px, .9375rem) !important; font-weight: 600 !important; line-height: 1.6 !important; }
/* Brief 437 (UX 428): the offers not read, one line with «إعادة المحاولة». */
.kr-offers-fail { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
/* A field's problem, under the field; the send's under the form. */
.kr-err { margin: .5rem 0 0; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-err); }
.kr-err--form { margin-top: .85rem; }
/* Brief 323: «رسوم عرض الأسعار» said before the send. */
.kr-fee { margin: 1rem 0 0; padding: .6rem .85rem; border-radius: 12px; background: var(--kh-primary-50); color: var(--kh-ink); font-size: max(12px, .875rem); line-height: 1.6; }
.kh-flow [aria-invalid="true"].kh-inp, .kh-flow [role="radiogroup"][aria-invalid="true"] .kh-chip { border-color: var(--kh-err); }

/* The services and the client's requests: tiles that open a page. */
.kr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .85rem; margin: 0; padding: 0; list-style: none; }
.kr-card { min-width: 0; }
.kr-card__link { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.kr-card__link:hover { border-color: var(--kh-primary); }
.kr-card__link:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kr-card__num { font-size: max(12px, .875rem); font-weight: 700; color: var(--kh-primary-600); }
.kr-card__title { font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-card__line { font-size: max(12px, .875rem); color: var(--kh-muted); overflow-wrap: anywhere; }
.kr-badge { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; background: var(--kh-primary-50); color: var(--kh-primary-600); font-size: max(12px, .8125rem); font-weight: 700; white-space: nowrap; }

/* «اطلب خدمة» (brief 293): the search above the cards, and each card's line and «اطلب الخدمة» at its foot. */
.kr-search { max-width: 26rem; margin: 0 0 1rem; }
/* Brief 306: the search and «حاسبة تكلفة البناء» on one row; on a phone the button takes the full width under it. Brief 970:
   the search and the categories' dropdown are «خدماتي»'s row (.kr-mf, below), which fills the row. */
.kr-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; }
.kr-tools > .kr-mf { flex: 1 1 auto; min-width: 0; margin: 0; }
.kr-calculator { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .kr-calculator { flex: 1 1 100%; justify-content: center; } }
/*
 * Brief 1089 (QA 1083 item 11): «دع المهندس أحمد يساعدك» in the tools' row: on a wide page its own line under the search and
 * the calculator, as before; on a phone beside the calculator, the two sharing one row of the same height, so the first
 * service shows high on the screen. There its question («لست متأكدًا مما تختار؟») is read to a screen reader only.
 */
.kr-tools > .kr-help { flex: 1 1 100%; margin: 0; }
@media (max-width: 600px) {
    .kr-tools { align-items: stretch; }
    .kr-tools > .kr-mf { flex: 1 1 100%; }
    .kr-tools > .kr-calculator, .kr-tools > .kr-help { flex: 1 1 0; min-width: 0; min-height: 44px; }
    .kr-tools > .kr-calculator { padding-inline: .75rem; white-space: normal; text-align: center; line-height: 1.3; }
    .kr-tools > .kr-help { justify-content: center; padding: .5rem .75rem; font-size: max(12px, .9375rem); line-height: 1.3; text-align: center; }
    .kr-help__lead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.kr-search .kh-inp { width: 100%; }
/* Brief 340: a service's card is one link: its image, name, short description and cities. */
.kr-svc { gap: .4rem; padding: .85rem; }
.kr-svc__txt { display: flex; flex: 1 1 auto; flex-direction: column; gap: .3rem; min-width: 0; }
/* Brief 437 (UX 428): the cities at the card's foot, so the cards of a row end alike. */
.kr-card__cities { margin-top: auto; color: var(--kh-primary-600); font-weight: 600; }

/*
 * Brief 308: a service's image on its card and on top of its page; with no image the brand's soft background and a
 * building, never an empty box. The card's short description under its name. Brief 1016 (owner: «الصورة تظهر كاملة
 * ونعتمدها كمقاس موحد»): the frame is square everywhere and the image is shown whole, never cropped.
 */
.kr-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--kh-primary-50); color: var(--kh-primary); }
.kr-media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.kr-media--empty { background: linear-gradient(135deg, var(--kh-primary-50), #fff); }
.kr-card__media { margin: 0 0 .35rem; }
.kr-card__sum { font-size: max(12px, .9375rem); line-height: 1.6; color: var(--kh-ink-2); overflow-wrap: anywhere; }
/* Brief 437 (UX 428): a short description cut at three lines (two on a phone, below). */
.kr-card__sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Brief 484 (S39): a service's page head: a small thumbnail beside the title, the description two lines at most. */
.kr-hero { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .25rem 1rem; align-items: center; margin: 0 0 1.25rem; }
.kr-hero__txt { min-width: 0; }
/* Brief 485: the page's title smaller than the question now (.kr-jr__q), the question the largest text. */
.kr-hero .kr-title { margin: 0; font-size: 20px; }
.kr-hero .kr-hint { margin: .2rem 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.kr-hero__thumb { width: 72px; height: 72px; border-radius: 14px; }
.kr-hero__thumb svg { width: 32px; height: 32px; }
#krHeroMedia[hidden] + .kr-hero__txt { grid-column: 1 / -1; }
.kr-hero:has(#krHeroMedia[hidden]) { grid-template-columns: minmax(0, 1fr); }
.kr-paused { display: grid; justify-items: center; gap: .25rem; }
.kr-paused__title { margin: 0; font-size: 1.0625rem !important; font-weight: 800 !important; color: var(--kh-ink); }
@media (max-width: 767px) {
    .kr-hero { grid-template-columns: 48px minmax(0, 1fr); gap: .15rem .75rem; margin-bottom: 1rem; }
    .kr-hero__thumb { width: 48px; height: 48px; border-radius: 10px; }
    .kr-hero__thumb svg { width: 22px; height: 22px; }
    .kr-hero .kr-title { font-size: 18px; }
}
/* Brief 340: on a phone a service's card lies flat and short, a small image beside its words. */
@media (max-width: 600px) {
    .kr-cards--services { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    .kr-svc { flex-direction: row; align-items: flex-start; gap: .75rem; padding: .7rem; }
    .kr-svc .kr-card__media { flex: 0 0 5.5rem; width: 5.5rem; aspect-ratio: 1 / 1; margin: 0; border-radius: 10px; }
    .kr-svc .kr-card__media svg { width: 32px; height: 32px; }
    .kr-svc .kr-card__sum { font-size: max(12px, .875rem); -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Brief 437 (UX 428): the services list loading as the cards it will show, its words for a screen reader only. */
.kr-skel { margin: 0 0 1rem; }
.kr-skel__card { display: grid; gap: .5rem; padding: .85rem; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.kr-skel__media, .kr-skel__line { display: block; border-radius: 10px; background: linear-gradient(90deg, #f0eff4 25%, #f7f6fa 50%, #f0eff4 75%); background-size: 200% 100%; animation: kr-skel 1.2s ease-in-out infinite; }
.kr-skel__media { aspect-ratio: 1 / 1; }
.kr-skel__line { height: .9rem; }
.kr-skel__line--short { width: 60%; }
@keyframes kr-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 600px) {
    .kr-skel__card { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; }
    .kr-skel__media { grid-row: 1 / span 3; aspect-ratio: 1 / 1; }
}
@media (prefers-reduced-motion: reduce) { .kr-skel__media, .kr-skel__line { animation: none; } }
/*
 * Brief 1089 (QA 1083 item 9): «خدماتي» loads as the page it will show: the filter's row, the two tabs and five rows, each a
 * request's row high (.kr-item__link: the image beside its lines, its button under them; one line from 1100px), so the
 * footer stays below the screen while the list loads and never jumps up under a short loading line.
 */
.kr-skel--mine { display: grid; gap: 1.1rem; }
.kr-skel__bar { display: flex; gap: .5rem 1rem; }
.kr-skel__bar > .kr-skel__line { flex: 0 1 20rem; min-width: 0; height: 44px; }
.kr-skel__bar > .kr-skel__line--short { flex: 0 1 15rem; width: auto; }
.kr-skel__line.kr-skel__tabs { width: min(14rem, 60%); height: 2.75rem; }
.kr-skel__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; overflow: hidden; }
.kr-skel__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; gap: .5rem .75rem; box-sizing: border-box; height: 9.5rem; padding: .75rem .85rem; }
.kr-skel__row + .kr-skel__row { border-top: 1px solid var(--kh-line); }
.kr-skel__row > .kr-skel__media { width: 3.5rem; }
.kr-skel__lines { display: grid; gap: .55rem; min-width: 0; }
@media (min-width: 1100px) {
    .kr-skel__row { align-items: center; height: 7.25rem; }
}

/* Brief 359: a request's offers and details wait for its head, so nothing shows above it while it loads. */
#krWork[hidden] ~ .kr-detail { display: none !important; }

/* «المهندس أحمد» (brief 293): his check of the city in the journey (brief 370); his face or badge is .kr-face (brief 406). */
.kr-ahmed__ok, .kr-ahmed__alert { margin: 0; padding: .55rem .75rem; border-radius: 10px; font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.6 !important; overflow-wrap: anywhere; }
.kr-ahmed__ok { background: var(--kh-primary-50); color: var(--kh-primary-600); }
.kr-ahmed__alert { background: #fdecec; color: var(--kh-err); }

/* A request's facts and answers: a label and its value, two columns that fold into one on a phone. */
.kr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.25rem; margin: 0; }
.kr-facts--stack { grid-template-columns: minmax(0, 1fr); }
.kr-fact { min-width: 0; }
.kr-fact dt { font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); overflow-wrap: anywhere; }
.kr-fact dd { margin: .15rem 0 0; font-size: max(12px, .9375rem); font-weight: 600; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-answer-choices { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; }
.kr-answer-choice { display: inline-flex; align-items: center; gap: .65rem; min-width: 0; max-width: 100%; }
.kr-answer-choice > .kh-choice-image { width: 96px; height: 64px; flex: 0 0 96px; object-fit: contain; border-radius: 10px; background: var(--kh-surface, #f8f7fb); }
.kr-answer-choice > span { min-width: 0; overflow-wrap: anywhere; }
.kr-files { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kr-files li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; min-width: 0; padding: .55rem 0; border-bottom: 1px solid var(--kh-line-2); }
.kr-files li:last-child { border-bottom: 0; }
.kr-files__need { font-size: max(12px, .875rem); font-weight: 600; color: var(--kh-ink-2); overflow-wrap: anywhere; }
/* Brief 781: the opportunity's two groups of request files, and who delivered each file under its name. */
/* Brief 799 (QA 791: «ملفات الطلب» read as part of «الخدمات المطلوبة منك»): the files' title (offers-core.js's .ko-sub
   right before the first group) opens its own part: space and a line above it, a heading's size and weight. */
.ko-sub:has(+ .kr-files__group) { margin-block-start: 1.1rem !important; padding-block-start: 1rem; border-top: 1px solid var(--kh-line-2); font-size: max(12px, 1rem) !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--kh-ink); }
.kr-files__group { margin: .75rem 0 0; font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-muted); }
.kr-files__by { flex-basis: 100%; font-size: max(12px, .8125rem); color: var(--kh-muted); overflow-wrap: anywhere; }
/* Brief 944: a client's file by the document it is, its own name small under it; under its answer, a short list. */
.kr-files__own { flex-basis: 100%; font-size: max(12px, .8125rem); font-weight: 400; color: var(--kh-muted); overflow-wrap: anywhere; }
.kr-fact dd .kr-files--answer { gap: .15rem; margin-top: .35rem; }
.kr-fact dd .kr-files--answer li { padding: .3rem 0; border-bottom: 0; }
.kr-page .kh-link, .kr-detail .kh-link, .kh-flow .kh-link { color: var(--kh-primary); font-weight: 600; overflow-wrap: anywhere; }

.kr-empty { padding: 2rem 1rem; border: 1px dashed var(--kh-line); border-radius: 14px; background: #fff; text-align: center; }
.kr-empty__text { margin: 0 0 .85rem; font-size: max(12px, .9375rem) !important; color: var(--kh-muted); }
.kr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.kr-pager__at { font-size: max(12px, .875rem); color: var(--kh-muted); }

/* Brief 396 (QA 393): the crumbs wrap at 375px, so «Request details» is read whole, not cut. */
.kr-page .aq-finance-breadcrumb { flex-wrap: wrap; row-gap: .35rem; }
.kr-page .aq-finance-breadcrumb__link { white-space: nowrap; }
.kr-page .aq-finance-breadcrumb__current { max-width: 100%; overflow: visible; white-space: normal; }

/* Brief 340: what happens after the send, above the send. */
.kr-next { margin: 1rem 0 0; font-size: max(12px, .9375rem) !important; font-weight: 600 !important; line-height: 1.6 !important; color: var(--kh-ink-2); }

@media (max-width: 640px) {
    .kr-title { font-size: 1.25rem; }
    .kr-facts { grid-template-columns: minmax(0, 1fr); }
    .kr-actions { justify-content: stretch; }
    .kr-actions > .kh-btn { flex: 1 1 100%; justify-content: center; }
}

/*
 * «خدماتي» (brief 340): a section per state, «تحتاج إجراءك» first with each request's button, the completed folded.
 * Brief 414: each section a list, each request one row and one link, no sideways scroll. Brief 855 (QA 772): image |
 * number and name, one status and whose turn it is, the steps and the last update | the client's one action.
 */
.kr-sec { margin: 0 0 1.5rem; }
.kr-sec__title { display: block; margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 800; color: var(--kh-ink); }
.kr-sec__n { font-weight: 600; color: var(--kh-muted); }
.kr-sec--done > summary { cursor: pointer; padding: .6rem 0; list-style-position: inside; }
.kr-sec--done > summary:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; border-radius: 8px; }
.kr-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; overflow: hidden; }
.kr-item + .kr-item { border-top: 1px solid var(--kh-line); }
.kr-item__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 13.5rem; grid-template-areas: "media main act"; align-items: center; gap: .5rem 1rem; min-width: 0; padding: .85rem 1.1rem; color: inherit; text-decoration: none; }
.kr-item__link:hover { background: var(--kh-primary-50); }
.kr-item__link:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: -3px; }
.kr-sec--action .kr-item__link, .kr-item--action .kr-item__link { border-inline-start: 3px solid var(--kh-primary); }
.kr-item__main { grid-area: main; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kr-item__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; min-width: 0; }
.kr-item__num { flex: none; font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-primary-600); }
/* QA 422: a name breaks between words only, never inside one. */
.kr-item__title { min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--kh-ink); overflow-wrap: break-word; word-break: normal; }
/* Brief 855: one status, coloured by where the request is, then whose turn it is; a sentence each, no badge. */
.kr-item__state { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; min-width: 0; font-size: max(12px, .875rem); line-height: 1.5; }
.kr-item__status { display: inline-flex; align-items: center; gap: .4rem; flex: none; font-weight: 800; color: var(--kh-ink-2); }
.kr-item__status::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.kr-item__status[data-kr-tone="inProgress"] { color: var(--kh-primary-600); }
.kr-item__status[data-kr-tone="awaitingPayment"], .kr-item__status[data-kr-tone="offersReady"] { color: #b54708; }
.kr-item__status[data-kr-tone="completed"], .kr-item__status[data-kr-tone="external"] { color: #067647; }
.kr-item__status[data-kr-tone="stopped"], .kr-item__status[data-kr-tone="cancelled"] { color: var(--kh-err); }
.kr-item__turn { min-width: 0; font-weight: 600; color: var(--kh-ink); overflow-wrap: break-word; }
.kr-sec--action .kr-item__turn, .kr-item--action .kr-item__turn { color: var(--kh-primary-600); }
.kr-item__meta { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: max(12px, .8125rem); color: var(--kh-muted); overflow-wrap: break-word; }
.kr-item__meta:empty { display: none; }
.kr-item__steps { font-weight: 700; color: var(--kh-ink-2); font-variant-numeric: tabular-nums; }
.kr-item__act { grid-area: act; justify-self: stretch; }
.kr-item__act:empty { display: block; }
/* Addendum 439: the longest action («Approve the delivery») fits its 13.5rem cell; a longer one wraps, centred. */
.kr-item__cta { pointer-events: none; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.3; padding-inline: .75rem; }

/*
 * Brief 426 (owner: «نفس المحاذاة + فلتر + صورة»): every row in the same columns: the service's image, the rest of the
 * width, the button (filling its cell, the cell kept when there is none). Narrower: the image and the rest, then the
 * button full width under them, none when there is no action.
 */
.kr-item__img { grid-area: media; display: flex; align-self: start; }
.kr-item__media { flex: none; width: 3.5rem; aspect-ratio: 1 / 1; border-radius: 10px; }
.kr-item__media.kr-media--empty, .kr-item__media.kr-media--wait { background: var(--kh-grey-bg, #f2f2f5); color: var(--kh-muted); }
.kr-item__media svg { width: 24px; height: 24px; }
@media (min-width: 1100px) {
    .kr-item__img { align-self: center; }
}
@media (max-width: 1099px) {
    .kr-item__link { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "media main" "act act"; gap: .5rem .75rem; }
    .kr-item__act:empty { display: none; }
}
@media (max-width: 600px) {
    .kr-item__link { padding: .75rem .85rem; }
    .kr-item__cta { min-height: 40px; padding-block: .3rem; }
}
/*
 * Brief 1089 (QA 1083 item 12): the whole row opens its request (it is one link) and a mark at its end says so; its action is
 * a secondary button (requests-core myRow) sized to its words under the row's lines, never a purple bar across each row.
 */
@media (max-width: 1099px) {
    .kr-item__link { position: relative; grid-template-areas: "media main" ". act"; padding-inline-end: 2.25rem; }
    .kr-item__act { justify-self: start; }
    .kr-item__cta { width: auto; min-width: 9rem; }
    .kr-item__link::after { content: ""; position: absolute; top: 50%; inset-inline-end: .95rem; width: .5rem; height: .5rem; border-top: 2px solid var(--kh-muted); border-inline-end: 2px solid var(--kh-muted);
        transform: translateY(-50%) rotate(45deg); }
    [dir="rtl"] .kr-item__link::after { transform: translateY(-50%) rotate(-45deg); }
}

/* Brief 426: the filter above the list, the search and the page's sections. Brief 940 (owner: dropdowns for filters):
   the sections in one dropdown beside the search, the platform's field, on one line at every width. Brief 970 (QA 959):
   the same row for «الخدمات»'s categories; never wrapped, the search and the dropdown narrowing together instead. */
.kr-mf { display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.1rem; }
.kr-mf__pick { flex: 0 1 15rem; min-width: 0; }
.kr-mf__select { width: 100%; min-height: 44px; font-size: max(12px, .875rem); }
.kr-mf .kr-mf__search { flex: 0 1 20rem; min-width: 0; margin: 0; }
/* Brief 855 (QA 772: three lines on a phone): on a phone one line; brief 940: the search and the dropdown share it. */
@media (max-width: 600px) {
    .kr-mf { flex-wrap: nowrap; gap: .5rem; }
    .kr-mf .kr-mf__search { flex: 1 1 auto; min-width: 0; }
    .kr-mf__pick { flex: 0 1 45%; min-width: 0; }
}
/* Brief 829: a category's icon and count. Brief 997 (owner): «الخدمات» is one list with no category headings (the filter is
   the dropdown of .kr-mf, brief 970), so these draw only Ahmed's category cards (brief 939b, .kr-help__cat). */
.kr-cat__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--kh-primary-50); color: var(--kh-primary-600); }
.kr-cat__icon:empty { display: none; }
.kr-cat__n { flex: 0 0 auto; min-width: 1.75rem; padding: .1rem .55rem; border-radius: 999px; background: #f2f2f5; font-size: max(12px, .8125rem); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; color: var(--kh-muted); }
@media (max-width: 600px) {
    .kr-cat__icon { width: 32px; height: 32px; }
}

/* Brief 322: a request's progress, its bar and its percent, on «خدماتي», the admin's list and the request pages. */
.kh-progress { display: flex; align-items: center; gap: .5rem; min-width: 7rem; }
.kh-progress__track { flex: 1 1 auto; height: .5rem; border-radius: 999px; background: #ecebf1; overflow: hidden; }
.kh-progress__fill { display: block; height: 100%; border-radius: 999px; background: var(--kh-primary); }
.kh-progress__num { flex: none; font-size: max(12px, .8125rem); font-weight: 800; color: var(--kh-ink); }

/*
 * Brief 370 (S32): a service's request as a journey led by «المهندس أحمد», one question per screen: his words, the
 * answers as buttons, the progress, «رجوع» and «التالي». Brief 484 (S39): the conversation is a card under the page's
 * compact head, Ahmed beside it (below).
 */
.kr-jr { max-width: 760px; margin: 0 auto; min-width: 0; }
/* Brief 377: a screen or a word scrolled to lands under the site's fixed header, not behind it. */
.kr-jr, .kr-jr * { scroll-margin-top: calc(var(--client-fixed-header-offset, 0px) + 12px); }
.kr-jr__screen { display: grid; gap: 1rem; min-width: 0; }
/* Brief 459: the conversation never wider than its column (a long word or line wraps instead). */
.kr-jr__stage { min-width: 0; }
@keyframes kr-jr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kr-jr__top { display: grid; gap: .4rem; }
/* Brief 459: one progress indicator. Brief 1082 (QA 1083 item 20: fifteen marks in two rows on a phone): «الخطوة 5 من 10»
   over one thin bar filled to the step now, the platform's progress bar (.kh-progress__track) at the journey's height. */
.kr-jr__progress { display: grid; gap: .35rem; flex: 1 1 auto; min-width: 0; }
.kr-jr__bar { display: block; height: 6px; }
/* Brief 377: «ابدأ من جديد» beside the count, once the journey has an answer kept; brief 972: the platform's secondary
   button (.kh-btn--ghost), never bare text, centred on the progress line. */
.kr-jr__line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.kr-jr__restart { flex: none; }
.kr-jr__restart:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-jr__count { margin: 0; font-size: max(12px, .8125rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-muted); font-variant-numeric: tabular-nums; }
.kr-jr__bubble { flex: 1 1 auto; min-width: 0; margin: 0; padding: .85rem 1rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; font-size: 1.0625rem !important; font-weight: 700 !important; line-height: 1.7 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-jr__bubble:focus { outline: none; }
.kr-jr__check { display: grid; gap: .5rem; }
.kr-jr__check .kr-ahmed__ok, .kr-jr__check .kr-ahmed__alert { border-radius: 12px; }
.kr-jr__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.kr-jr__answers { display: grid; gap: .6rem; }
.kr-jr__answer { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: max(44px, 3.25rem); margin: 0; padding: .8rem 1rem; border: 1.5px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5; text-align: start; cursor: pointer; overflow-wrap: anywhere; }
.kr-jr__answer:hover { border-color: var(--kh-primary); }
.kr-jr__answer.is-on { border-color: var(--kh-primary); background: var(--kh-primary-50); color: var(--kh-primary-600); }
.kr-jr__answer:focus-visible, .kr-jr__file .kh-file__inp:focus-visible + .kr-jr__pick { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-jr__answers[aria-invalid="true"] .kr-jr__answer, .kr-jr__file [aria-invalid="true"] + .kr-jr__pick { border-color: var(--kh-err); }
/* Brief 1251 (QA 1245): held by a stop answer, only the chosen answer that stops the request is red. */
.kr-jr__answers .kr-jr__answer.is-stop, .kr-jr__answers .kr-jr__answer.is-stop:hover { border-color: var(--kh-err); }
.kr-jr__file { display: grid; gap: .5rem; }
.kr-jr__pick { justify-content: center; color: var(--kh-primary-600); }
.kr-jr__fname { font-size: max(12px, .875rem); color: var(--kh-muted); overflow-wrap: anywhere; }
.kr-jr__err { margin: 0; }
/*
 * Brief 939 (owner: cities in a dropdown): the city's field the size of an answer, a chevron on its end side; its list
 * opens under it in a white panel that scrolls, each city a row of 44px at least, the one the arrows are on and the one
 * under the pointer tinted, the chosen one ticked. The same on a phone, the panel never taller than half the screen.
 */
/* Refute 1098: the block holds its height while its list is open (requests.js sets its min-height), the field and the list
   at its top, the rest under them. */
.kr-jr__city { display: grid; gap: .4rem; align-content: start; }
.kr-jr__combo { position: relative; }
.kr-jr .kr-jr__city-inp { min-height: 56px; padding-inline-end: 2.75rem; border: 1.5px solid var(--kh-line); border-radius: 12px; font-size: 1.0625rem; font-weight: 700; }
.kr-jr .kr-jr__city-inp[aria-invalid="true"] { border-color: var(--kh-err); }
.kr-jr__caret { position: absolute; inset-inline-end: 1rem; top: 50%; display: inline-flex; color: var(--kh-muted); transform: translateY(-50%); pointer-events: none; }
.kr-jr__city-inp[aria-expanded="true"] + .kr-jr__caret { transform: translateY(-50%) rotate(180deg); }
.kr-jr__cities { display: grid; gap: .15rem; max-height: min(18rem, 50vh); max-height: min(18rem, 50dvh); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; border: 1.5px solid var(--kh-line); border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(16, 24, 40, .08); }
.kr-jr__cities[hidden], .kr-jr__city-opt[hidden], .kr-jr__city-none[hidden] { display: none; }
.kr-jr .kr-jr__city-opt { min-height: 44px; padding: .55rem .75rem; border: 0; border-radius: 8px; font-size: 1rem; }
.kr-jr__city-opt:hover, .kr-jr__city-opt.is-active { background: var(--kh-primary-50); }
.kr-jr__city-opt.is-active { box-shadow: inset 0 0 0 2px var(--kh-primary); }
.kr-jr__foot { display: flex; gap: .6rem; max-width: 100%; margin-top: .25rem; }
.kr-jr__foot > .kh-btn { justify-content: center; min-height: 3rem; border-radius: 12px; }
.kr-jr__foot > .kh-btn--primary { flex: 1 1 auto; }
/* Brief 430 (QA 422): «أرسل الطلب» in a bar fixed at the foot of the screen while the summary shows, on every screen. */
.kr-jr[data-step="summary"] .kr-jr__foot { position: sticky; bottom: 0; z-index: 5; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--kh-line); background: #fff; }
.kr-jr__rows { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kr-jr__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; width: 100%; padding: .7rem .9rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; font: inherit; text-align: start; cursor: pointer; }
.kr-jr__row:hover { border-color: var(--kh-primary); }
.kr-jr__row:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-jr__rq { grid-column: 1; margin: 0; font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); }
.kr-jr__ra { grid-column: 1; font-size: max(12px, .9375rem); font-weight: 700; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-jr__edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: max(12px, .875rem); font-weight: 700; color: var(--kh-primary); }
.kr-jr__who { margin: 0; font-size: max(12px, .9375rem) !important; font-weight: 700 !important; line-height: 1.6 !important; color: var(--kh-ink); }
.kr-jr__after .kr-next { margin: .25rem 0 0; }
/* Brief 418: the summary a compact list of question and answer with the pencil, part of his message; its heading the size
   of his words. */
.kr-jr__rows--compact { gap: 0; }
.kr-jr__rows--compact .kr-jr__row { border: 0; border-bottom: 1px solid var(--kh-line); border-radius: 0; padding: .55rem .15rem; background: none; }
.kr-jr__rows--compact li:last-child .kr-jr__row { border-bottom: 0; }
.kr-jr__rows--compact .kr-jr__row:hover { background: var(--kh-primary-50); }
.kr-jr__rows--compact .kr-jr__edit { display: inline-flex; color: var(--kh-primary); }
.kr-jr__h { margin: 0; font-size: max(12px, 1rem); font-weight: 800; line-height: 1.6; color: var(--kh-ink); }
.kr-jr__screen > .kr-fee { margin: 0; }

/*
 * Brief 406 (S34): the journey as one conversation with «المهندس أحمد». His messages with his face on the start side (the
 * right in Arabic), the client's replies on the other side, a reply a tap back to its question. A new turn of his types in
 * for a moment, then slides in; the conversation stays on the page and grows. The same on a phone and a desktop.
 */
/* Brief 417: the redraw never moves the page by itself (requests.js makes the one move, core.journeyScroll). */
.kr-chat { display: grid; gap: .9rem; min-width: 0; overflow-anchor: none; }
.kr-msg { display: flex; align-items: flex-end; gap: .6rem; min-width: 0; }
.kr-msg--me { justify-content: flex-end; }
.kr-msg__body { display: grid; gap: .4rem; flex: 1 1 auto; min-width: 0; max-width: 34rem; }
.kr-msg__bubble { justify-self: start; max-width: 100%; margin: 0; padding: .7rem .95rem; border: 1px solid var(--kh-line); border-radius: 12px; border-end-start-radius: 4px; background: #fff; color: var(--kh-ink); font-size: max(12px, 1rem); line-height: 1.7; overflow-wrap: anywhere; }
.kr-msg .kr-jr__bubble { flex: none; padding: .7rem .95rem; }
.kr-msg__bubble--soft { border-color: transparent; background: var(--kh-primary-50); font-size: max(12px, .9375rem) !important; font-weight: 600 !important; }
/* Brief 916 (owner): what the answer before added, or the file received, a small quiet line in the middle of the card
   between the answered question and the new one, a round tick in the success colour on its start side; no bubble. */
.kr-jr__added { justify-self: center; max-width: 100%; margin: 0; padding: 0 .5rem; text-align: center; color: var(--kh-muted); font-size: max(12px, .875rem) !important; font-weight: 600 !important; line-height: 1.6 !important; overflow-wrap: anywhere; }
.kr-jr__added-ok { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-inline-end: .4rem; border-radius: 50%; background: var(--kh-ok); color: #fff; vertical-align: -.25em; }
.kr-jr__added-ok svg { width: 11px; height: 11px; }
/* Brief 1220: an answer that stops the request: its message in a calm card under the answers, the other service a real button. */
.kr-jr__stop { display: grid; gap: .6rem; justify-items: start; margin: 0; padding: .9rem 1rem; border: 1px solid rgba(181, 71, 8, .2); border-radius: 14px; background: var(--kh-warn-bg, #fffaeb); text-align: start; }
.kr-jr__stop:focus { outline: 2px solid var(--kh-warn, #b54708); outline-offset: 2px; }
.kr-jr__stop-text { margin: 0; font-size: max(14px, 1rem) !important; font-weight: 600 !important; line-height: 1.7 !important; color: var(--kh-ink, #101828); overflow-wrap: anywhere; }
.kr-jr__stop-go { max-width: 100%; white-space: normal; }
.kr-jr__stop-note { margin: 0; font-size: max(12px, .875rem) !important; line-height: 1.6 !important; color: var(--kh-muted); }
/* His one short tip with the question, quieter than the question. Brief 459: a small line under it, not a bubble. */
.kr-msg__tip, .kr-msg .kr-msg__tip { padding: 0 .15rem; border: 0; background: none; color: var(--kh-muted); font-size: max(12px, .8125rem) !important; font-weight: 600 !important; line-height: 1.6 !important; }
.kr-msg__reply { display: inline-flex; align-items: center; gap: .5rem; max-width: 80%; border: 0; border-radius: 12px; border-end-end-radius: 4px; background: var(--kh-primary); color: #fff; font: inherit; font-size: max(12px, 1rem); font-weight: 700; line-height: 1.6; text-align: start; }
button.kr-msg__reply { cursor: pointer; }
button.kr-msg__reply:hover { background: var(--kh-primary-600); }
button.kr-msg__reply:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-msg__edit { display: inline-flex; flex: none; opacity: .8; }
.kr-msg__card { display: grid; gap: .75rem; padding: .85rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; }
.kr-msg__card .kr-fee, .kr-msg__card .kr-next { margin: 0; }
/* His answers as buttons under his message, in line with his bubbles. */
.kr-opts { margin-inline-start: 3.85rem; }
.kr-jr__answer { border-color: #d7e6e1; }
.kr-send { min-height: 3.25rem; font-size: max(12px, 1.0625rem); font-weight: 800; }

/* His face: one component. The owner's image or looping video by mood over a neutral badge in the brand's colour,
   «م. أحمد», which shows until a file exists or when one fails (follow-up to brief 406). */
/* Brief 417: one size everywhere, «م. أحمد» on one line; once per run of his messages, the others keep its room (--gap).
   Brief 418: never broken inside a word; in English «Eng. Ahmed» may take two lines at its space. */
.kr-face { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 50%; overflow: hidden; background: var(--kh-primary); color: #fff; }
.kr-face--gap { background: none; }
.kr-face__badge { padding: 0 .15rem; font-size: 12px; font-weight: 800; line-height: 1.15; text-align: center; white-space: nowrap; overflow-wrap: normal; }
/* Brief 430 (QA 422): the fallback badge on one line in both languages: without his image the circle becomes a pill as
   wide as its words. */
.kr-face:not(:has(.kr-face__img)):not(.kr-face--gap) { width: auto; min-width: 3.25rem; padding: 0 .4rem; border-radius: 999px; }
/* Brief 423 (S36): his image cropped to the head and shoulders, over a light circle; the badge goes while it is there. */
.kr-face__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.7); transform-origin: 50% 4%; }
.kr-face:has(.kr-face__img) { background: var(--kh-primary-50); }
.kr-face:has(.kr-face__img) .kr-face__badge { visibility: hidden; }
/* His message now: larger on a phone; it floats quietly. */
.kr-face--now { width: 4.5rem; height: 4.5rem; animation: kr-float 4s ease-in-out infinite; }
/* A change of mood: the new image fades in over the one before with a light zoom (requests.js, showMood). */
/* Brief 484 (S39): a float and an entrance by transform only, never a layout property. */
@keyframes kr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes kr-stand-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kr-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Brief 423: the ticks. The pressed answer fills and its tick is drawn; the chosen one keeps it. */
.kr-tick { display: inline-flex; flex: none; margin-inline-start: auto; opacity: 0; }
.kr-tick svg { width: 18px; height: 18px; }
.kr-jr__answer.is-on .kr-tick, .kr-jr__answer.is-picked .kr-tick { opacity: 1; }
.kr-jr__answer.is-picked, .kr-jr__answer.is-picked:hover { border-color: var(--kh-primary); background: var(--kh-primary); color: #fff; transition: background .15s ease-out, color .15s ease-out; }
.kr-tick path, .kr-done-tick path, .kr-done-tick circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.kr-jr__answer.is-picked .kr-tick path { stroke-dashoffset: 1; animation: kr-tick-draw .25s ease-out .08s forwards; }
@keyframes kr-tick-draw { to { stroke-dashoffset: 0; } }
.kr-msg__tick { display: inline-flex; flex: none; opacity: .85; }
/* Brief 970 (QA 959, owner: «الصح مو اخضر في النهاية»): the summary's tick beside each answer in the success green of the
   path's done steps (work.css, --kh-ok). */
.kr-jr__ok { display: inline-flex; margin-inline-end: .35rem; color: var(--kh-ok); vertical-align: -2px; }
/* Brief 1082 (owner: the progress and «ابدأ من جديد» in one line): on a phone the button a little smaller beside the bar. */
@media (max-width: 767px) {
    .kr-jr .kr-jr__restart { padding-inline: .7rem; font-size: max(12px, .8125rem); }
}
/* Brief 939 (owner): «وصل طلبك» under a tick in the success colour, on the side its words start, as the card's other lines. */
.kr-done-tick { display: flex; justify-content: flex-start; color: var(--kh-ok); }
.kr-done-tick circle { stroke-dashoffset: 1; animation: kr-tick-draw .45s ease-out .6s forwards; }
.kr-done-tick path { stroke-dashoffset: 1; animation: kr-tick-draw .3s ease-out 1.05s forwards; }

/* Brief 423: short answers two by two on a wide screen. */
@media (min-width: 641px) {
    .kr-jr__answers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Brief 423: Ahmed stands over a light circle, «المهندس أحمد» under him, on the side he points from (the left in Arabic;
 * flipped in English so he points to the card). Brief 484 (S39): drawn once outside the card's redraw; his two images one
 * over the other, the new mood fading in by its opacity once decoded (requests.js); a quiet float and one entrance, by
 * transform only. On 1100px and wider a column of about 320px beside the card, fixed under the header, its top level with
 * the card's; narrower, about 140px at the card's head. Brief 1082 (owner: the head too big on a phone): below 768px a
 * small round face, his head and shoulders as in his messages (.kr-face__img), beside «المهندس أحمد» on one line.
 */
.kr-stand { display: none; animation: kr-stand-in .5s ease-out both; }
.kr-stand:not([hidden]) { display: block; }
.kr-stand__fig { position: relative; width: 100%; aspect-ratio: 1 / 1; animation: kr-float 4s ease-in-out infinite; will-change: transform; }
.kr-stand__fig::before { content: ""; position: absolute; inset: 22% 6% 0; border-radius: 50%; background: var(--kh-primary-50); }
.kr-stand__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .22s ease-out; }
.kr-stand__img.is-on { opacity: 1; }
.kr-page[dir="ltr"] .kr-stand__img { transform: scaleX(-1); }
.kr-stand__name { margin: .5rem 0 0; font-size: max(12px, 1rem) !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: center; color: var(--kh-ink); }

/* The card: the page's grid holds it and Ahmed; nothing shows while the service loads. */
.kr-jr__grid, .kr-jr__card { min-width: 0; }
.kr-jr__grid:has(> #krBody[hidden]) { display: none; }
@media (min-width: 1100px) {
    .kr-jr { max-width: 1120px; }
    /* Brief 459: each column holds its own; the card's least width is never its content's, so it cannot grow under him. */
    .kr-jr__grid { display: grid; grid-template-columns: minmax(0, 760px) 320px; grid-template-areas: "card stand"; column-gap: 40px; align-items: start; justify-content: center; }
    .kr-jr__card { grid-area: card; padding: 28px 32px; border: 1px solid var(--kh-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06); }
    .kr-stand { grid-area: stand; position: sticky; top: calc(var(--client-fixed-header-offset, 0px) + 16px); align-self: start; min-width: 0; overflow: hidden; padding-top: 8px; }
    .kr-stand__fig { width: 300px; max-width: 100%; margin-inline: auto; }
}
@media (max-width: 1099px) {
    .kr-jr__grid { padding: 20px 24px 24px; border: 1px solid var(--kh-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06); }
    .kr-stand:not([hidden]) { display: flex; align-items: flex-end; gap: .75rem; margin: 0 0 1rem; }
    .kr-stand__fig { width: 140px; flex: none; }
    .kr-stand__name { margin: 0 0 .75rem; text-align: start; }
}
@media (max-width: 767px) {
    .kr-jr__grid { padding: 16px; border-radius: 14px; }
    .kr-stand:not([hidden]) { flex-wrap: nowrap; align-items: center; gap: .6rem; margin: 0 0 .75rem; }
    .kr-stand__fig { width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: var(--kh-primary-50); }
    .kr-stand__fig::before { display: none; }
    .kr-stand__img { object-fit: cover; object-position: 50% 0; transform: scale(1.7); transform-origin: 50% 4%; }
    .kr-page[dir="ltr"] .kr-stand__img { transform: scale(-1.7, 1.7); }
    .kr-stand__name { flex: 1 1 auto; min-width: 0; margin: 0; }
}

/* Brief 484 (S39): inside the card his words take its width; the question now is the largest text, his tip small under it. */
.kr-jr .kr-msg__body { max-width: none; }
.kr-jr .kr-opts, .kr-jr .kr-path-box { margin-inline-start: 0; }
.kr-msg .kr-jr__q, .kr-jr__q { padding: 0; border: 0; background: none; font-size: 24px !important; font-weight: 800 !important; line-height: 1.5 !important; color: var(--kh-ink); }
.kr-jr .kr-jr__answer { min-height: 56px; font-size: 1.0625rem; }
.kr-jr__card .kr-jr__foot { margin-top: .5rem; }
.kr-jr__go { min-height: 56px; min-width: 12rem; justify-content: center; border-radius: 14px; font-size: 1.125rem; font-weight: 800; }
/* The card's top row: the progress on one side, «ابدأ من جديد» on the other. */
.kr-jr__card .kr-jr__top { margin: 0 0 1rem; padding: 0 0 .85rem; border-bottom: 1px solid var(--kh-line); }
@media (max-width: 767px) {
    .kr-msg .kr-jr__q, .kr-jr__q { font-size: 20px !important; }
    .kr-jr__go { width: 100%; }
    /* Brief 1082: a tighter top row on a phone, so the question comes higher on the first screen. */
    .kr-jr__card .kr-jr__top { margin-bottom: .75rem; padding-bottom: .6rem; }
}

/* Brief 484 (S39): more than three answers folded under «إجاباتك (N)», opened by a tap. */
.kr-log-fold__sum { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; color: var(--kh-ink-2); font-size: max(12px, .9375rem); font-weight: 700; list-style: none; cursor: pointer; }
.kr-log-fold__sum::-webkit-details-marker { display: none; }
.kr-log-fold__sum::after { content: ""; width: .5rem; height: .5rem; margin-inline-start: auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kr-log-fold[open] > .kr-log-fold__sum::after { transform: rotate(-135deg); }
.kr-log-fold__sum:hover { border-color: var(--kh-primary); }
.kr-log-fold__sum:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-log-fold > .kr-log { margin-top: .35rem; }

/* A new turn: his typing for about half a second, then his message slides in. Brief 1231 (QA 1229 item 5: the dots over the
   section's title): the dots gone (.3s + .2s) before the message starts to show (.55s), never both at once. */
.kr-turn { position: relative; }
.kr-typing { display: none; align-items: flex-end; gap: .6rem; }
.kr-turn.is-new .kr-typing { display: flex; position: absolute; inset-inline-start: 0; top: 0; z-index: 1; animation: kr-typing-out .2s ease-out .3s both; }
.kr-turn.is-new .kr-turn__body { animation: kr-jr-in .3s ease-out .55s both; }
.kr-turn__body { display: grid; gap: 1rem; min-width: 0; }
.kr-typing__dots { display: inline-flex; gap: 4px; padding: .85rem 1rem; border: 1px solid var(--kh-line); border-radius: 12px; border-end-start-radius: 4px; background: #fff; }
.kr-typing__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--kh-muted); animation: kr-typing 1s ease-in-out infinite; }
.kr-typing__dots i:nth-child(2) { animation-delay: .15s; }
.kr-typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes kr-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes kr-typing-out { to { opacity: 0; visibility: hidden; } }

/*
 * Brief 437 (S37): each answered turn folded to one line: the question cut short, the answer, a tick and the pencil; the
 * whole line a tap back to it. No faces and no images.
 */
.kr-log { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.kr-log__btn { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .45rem .75rem; border: 1px solid var(--kh-line); border-radius: 10px; background: #fff; color: var(--kh-ink); font: inherit; text-align: start; cursor: pointer; }
.kr-log__btn:hover { border-color: var(--kh-primary); background: var(--kh-primary-50); }
.kr-log__btn:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
/* Brief 459: the question and the answer wrap; a line never widens the column. */
.kr-log__q { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); }
.kr-log__a { flex: 0 1 auto; min-width: 0; max-width: 50%; overflow-wrap: anywhere; font-size: max(12px, .9375rem); font-weight: 700; color: var(--kh-ink); }
.kr-log__tick { grid-area: tick; display: inline-flex; flex: none; color: var(--kh-primary); }
.kr-log__edit { grid-area: edit; display: inline-flex; flex: none; color: var(--kh-primary); opacity: .8; }
/* Brief 459: on a phone two lines: the question small, the answer under it with its tick and the pencil. */
@media (max-width: 640px) {
    .kr-log__btn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "q q q" "a tick edit"; gap: .15rem .5rem; }
    .kr-log__q { grid-area: q; }
    .kr-log__a { grid-area: a; max-width: none; }
}

/*
 * Brief 995 (UX 966 §4): «هذا مسار طلبك», one numbered list in the order the work runs, each step with who does it and its
 * approvals and payments as quiet lines under it; the numbers in the brand's colour alone, no state, no date and no other
 * colour (no more amber payments); eight steps, then «اعرض الخطوات الباقية». At 375px every line wraps inside the card.
 */
.kr-path-box { display: grid; gap: .6rem; min-width: 0; margin-inline-start: 3.85rem; }
.kr-path { display: grid; min-width: 0; margin: 0; padding: .25rem 1rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; list-style: none; }
.kr-path__step { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .65rem; align-items: start; padding: .65rem 0; border-top: 1px solid var(--kh-line-2); }
.kr-path__step:first-child { border-top: 0; }
.kr-path__step[hidden], .kr-path__end[hidden] { display: none; }
.kr-path__num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--kh-primary-50); color: var(--kh-primary); font-size: max(12px, .875rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.kr-path__body { display: grid; gap: .1rem; min-width: 0; }
.kr-path__name { font-size: max(12px, .9375rem); font-weight: 800; line-height: 1.5; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-path__who { font-size: max(12px, .875rem); font-weight: 700; line-height: 1.5; color: var(--kh-ink-2); overflow-wrap: anywhere; }
.kr-path__subs { display: grid; gap: .1rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.kr-path__sub { font-size: max(12px, .8125rem); font-weight: 500; line-height: 1.55; color: var(--kh-muted); overflow-wrap: anywhere; }
.kr-path__sub--note { font-weight: 700; color: var(--kh-ink-2); }
/* Brief 1215: the hold sentence under a payment the platform keeps until a stage is approved. */
.kr-path__sub--held { color: var(--kh-ink-2); }
/* Brief 1187: a point of steps that run together, «في الوقت نفسه» then a line per step, its payments under them. */
.kr-path__together { justify-self: start; padding: .05rem .6rem; border-radius: 999px; background: var(--kh-primary-50); font-size: max(12px, .8125rem); font-weight: 800; line-height: 1.7; color: var(--kh-primary); }
.kr-path__items { display: grid; gap: .35rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.kr-path__item { display: grid; gap: .1rem; min-width: 0; padding-inline-start: .65rem; border-inline-start: 2px solid var(--kh-line); }
.kr-path__end { padding: .65rem 0; padding-inline-start: 2.4rem; border-top: 1px solid var(--kh-line-2); font-size: max(12px, .9375rem); font-weight: 800; color: var(--kh-ink); }
.kr-path__more { justify-self: start; min-height: 2.75rem; }
@media (max-width: 640px) {
    .kr-opts, .kr-path-box { margin-inline-start: 0; }
    .kr-path { padding-inline: .75rem; }
    .kr-path__more { justify-self: stretch; justify-content: center; }
    .kr-msg__reply { max-width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
    .kr-typing__dots i, .kr-turn.is-new .kr-turn__body { animation: none !important; }
    .kr-turn.is-new .kr-typing { display: none; }
    /* Brief 423: no crossfade, float, entrance or drawn tick; the ticks show drawn. */
    .kr-stand, .kr-stand__fig, .kr-face--now { animation: none !important; }
    .kr-stand__img { transition: none !important; }
    .kr-tick path, .kr-done-tick path, .kr-done-tick circle { animation: none !important; stroke-dashoffset: 0 !important; }
    .kr-jr__answer.is-picked { transition: none; }
}
/*
 * Brief 484 (S39): below 768px «رجوع», «التالي» and «أرسل الطلب» are a bar fixed at the foot of the screen, the screen's
 * width and no wider, the card keeping room under it; «لنبدأ» and «تابع طلبك» stay in the card. Brief 485: the bar
 * (#krFoot) is outside the turn, so it stays while a new turn fades in without a move.
 * Brief 1082 (owner on an iPhone: a white gap under the card, then the site footer, the bar over the footer at the page's
 * end): the request is one screen like an app's. The layout leaves the site footer out (ViewData["HideSiteFooter"]); the
 * card fills the screen under the site's header down to the bar at every length, so nothing white is left between them
 * (dvh: the screen as it shows now, with or without the browser's bars; vh first for a browser without dvh); the room
 * under the card is the bar's height with the phone's safe area, so the card's last line is never under the bar; with
 * the keyboard open the bar rides above it (--kr-kb, set by requests.js from the visual viewport).
 */
@media (max-width: 767px) {
    .kr-wrap[data-kr-screen] { display: flex; flex-direction: column; min-height: calc(100vh - var(--client-fixed-header-offset, 0px)); min-height: calc(100dvh - var(--client-fixed-header-offset, 0px)); padding-top: 12px; padding-bottom: 0; }
    .kr-wrap[data-kr-screen] > .kr-page { display: flex; flex-direction: column; flex: 1 0 auto; padding-bottom: 0; }
    .kr-wrap[data-kr-screen] .aq-finance-breadcrumb { margin-bottom: .75rem; }
    .kr-wrap[data-kr-screen] .kr-hero { margin-bottom: .75rem; }
    .kr-wrap[data-kr-screen] .kr-jr { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; padding-bottom: 16px; }
    .kr-wrap[data-kr-screen] .kr-jr__grid { flex: 1 0 auto; }
    /* Brief 1108 (QA 1106 item 14: Ahmed's greeting in a card with ~550px empty under «لنبدأ»): the greeting has no bar to
       reach, so its card is as tall as what it holds. */
    .kr-wrap[data-kr-screen] .kr-jr[data-step="start"] .kr-jr__grid { flex: 0 0 auto; }
    .kr-jr:not([data-step="start"]) #krSummary { display: none; }
    .kr-jr .kr-jr__foot, .kr-jr[data-step="summary"] .kr-jr__foot { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; margin: 0; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--kh-line); background: #fff; box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); transform: translateY(calc(var(--kr-kb, 0px) * -1)); }
    .kr-jr .kr-jr__foot--start { position: static; padding: 0; border: 0; background: none; box-shadow: none; transform: none; }
    .kr-jr:not([data-step="start"]):not([data-step="sent"]) { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
    .kr-turn.is-new .kr-turn__body { animation-name: kr-fade-in; }
}

/* Brief 370 (S32): «أحتاج مساعدة» on the services list, and Ahmed's window with the services as choices. Brief 377: over
   the site's fixed header (#mainHeader, 99997), so «×» and his greeting are never under it. */
.kr-help { display: flex; align-items: center; width: 100%; margin: 0 0 1rem; padding: .9rem 1.1rem; border: 1.5px solid var(--kh-primary); border-radius: 12px; background: var(--kh-primary-50); color: var(--kh-primary-600); font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.5; text-align: start; cursor: pointer; }
.kr-help:hover { background: #fff; }
.kr-help:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-help__back { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 40, .45); }
/* Brief 939 (owner: «نوسع الشاشة شوي»): wider on a desktop; a phone keeps the whole screen (below). */
.kr-help__box { position: relative; display: grid; gap: 1rem; width: 100%; max-width: 840px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 1.25rem; border-radius: 12px; background: #f7f7fa; animation: kr-jr-in .22s ease-out both; }
.kr-help__close { position: absolute; z-index: 1; inset-inline-end: .5rem; top: .5rem; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--kh-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.kr-help__close:focus-visible { outline: 3px solid var(--kh-primary); }
.kr-help__box .kr-jr__say { padding-inline-end: 2.75rem; }
.kr-help__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.kr-help__opt { display: flex; align-items: center; gap: .85rem; padding: .7rem; border: 1.5px solid var(--kh-line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; }
.kr-help__opt:hover { border-color: var(--kh-primary); }
.kr-help__opt:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-help__media { flex: 0 0 5rem; width: 5rem; aspect-ratio: 1 / 1; border-radius: 12px; }
.kr-help__media svg { width: 30px; height: 30px; }
.kr-help__txt { display: grid; gap: .2rem; min-width: 0; }
/* Brief 939b (owner): the categories first, a card each with its icon, its name and how many services it has, two by two
   from 481px and one under the other on a phone; then the picked one's name, the way back and its services. */
.kr-help__cats { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.kr-help__cat { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 64px; padding: .75rem .9rem; border: 1.5px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink); font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.4; text-align: start; cursor: pointer; }
.kr-help__cat:hover { border-color: var(--kh-primary); }
.kr-help__cat:focus-visible { outline: 3px solid var(--kh-primary); outline-offset: 2px; }
.kr-help__cat-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kr-help__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.kr-help__cat-title { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; font-size: max(12px, 1.0625rem); font-weight: 800; line-height: 1.4; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-help__return { min-height: 44px; }
@media (min-width: 481px) { .kr-help__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .kr-help__back { align-items: stretch; padding: 0; }
    .kr-help__box { max-width: none; max-height: none; border-radius: 0; padding: calc(1rem + env(safe-area-inset-top)) 16px 1rem; }
    .kr-help__close { top: calc(.5rem + env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce) { .kr-help__box { animation: none; } }

/* S45 (brief 507): a location question's map (the platform's picker), an attachment's files, a text's box. */
.kr-jr__loc, .kr-jr__text { display: grid; gap: .5rem; }
.kr-jr__map { width: 100%; height: 280px; border-radius: 12px; overflow: hidden; border: 1px solid var(--kh-line, #e2e8f0); background: #f8fafc; }
/* Brief 900 (QA 891 P3-9): «خريطة | قمر صناعي» in the map's top corner, clear of the pin in its middle and of the zoom. */
.kr-jr__map .map-style-toggle { top: 10px; right: 10px; bottom: auto; left: auto; max-width: calc(100% - 20px); }
.kr-jr__locate { justify-self: start; }
.kr-jr__label { font-size: max(12px, .875rem); font-weight: 600; }
.kr-jr__text textarea, .kr-jr__loc .kh-inp { width: 100%; max-width: 100%; }
.kr-jr__files { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.kr-jr__files li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; overflow-wrap: anywhere; }
.kr-jr__unattach { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 1.25rem; cursor: pointer; }
/* Brief 572: a number's one line with its unit beside it. */
.kr-jr__num { display: flex; align-items: center; gap: .5rem; }
.kr-jr__num .kh-inp { flex: 1 1 auto; min-width: 7rem; max-width: 16rem; }
/* Owner 2026-10-31: a unit of up to 200 characters wraps beside its box; a short one reads as before. */
.kr-jr__unit { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.kr-jr__numnote:empty { display: none; }
.kw-head__place a { white-space: nowrap; }
@media (max-width: 599px) { .kr-jr__map { height: 240px; } }

/*
 * Brief 1018 (UX 999, owner: «كثرة عرض تفاصيل … ليش كذا بوف وجه العميل»): summary first, details on demand. A summary line is
 * a real button across its part (flows-core fold): its words, its action in the primary colour and a chevron that turns once
 * open (aria-expanded); its part opens in place under it. kh-fold--inline sits in a line of text or a table's cell. A fold's
 * window (foldWindow) is the platform's dialog in the middle of the page, the whole screen on a phone, closed by its button or
 * Escape only. Each at 375px wraps its words and never scrolls sideways.
 */
.kh-fold { display: grid; gap: .5rem; min-width: 0; margin: .5rem 0 0; }
.kh-fold__line { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; margin: 0; padding: .55rem .85rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink); font-family: inherit; font-size: max(12px, .9375rem); font-weight: 700; line-height: 1.5; text-align: start; cursor: pointer; }
.kh-fold__line:hover { background: var(--kh-primary-50); }
.kh-fold__line:focus-visible { outline: 2px solid var(--kh-primary-600); outline-offset: 2px; }
.kh-fold__sum { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kh-fold__act { flex: none; color: var(--kh-primary-600); font-weight: 800; white-space: nowrap; }
.kh-fold__chev { flex: none; color: var(--kh-primary-600); transition: transform .15s ease; }
.kh-fold__line[aria-expanded="true"] .kh-fold__chev { transform: rotate(180deg); }
.kh-fold--window .kh-fold__chev { transform: rotate(-90deg); }
/* Brief 1279 (QA 1274 item 8: «Details <» in English on the partner's pages): the arrow turns by the page's language on <html>,
   which every layout writes; a [dir] test also read the partner shell, whose dir is reversed (_PartnerLayout.cshtml), and
   turned it left in English (finance-admin.css, briefs 462 and 469, the same rule). */
html[lang="ar"] .kh-fold--window .kh-fold__chev { transform: rotate(90deg); }
.kh-fold__body { min-width: 0; }
.kh-fold__body[hidden], .kh-win[hidden] { display: none !important; }
.kh-fold--inline { display: inline-grid; gap: .25rem; margin: 0; vertical-align: baseline; }
.kh-fold--inline > .kh-fold__line { display: inline-flex; width: auto; min-height: 32px; padding: .15rem .5rem; border-color: transparent; background: none; font-size: inherit; font-weight: 700; }
.kh-fold--inline > .kh-fold__line:hover { background: var(--kh-primary-50); }
@media (prefers-reduced-motion: reduce) { .kh-fold__chev { transition: none; } }
.kh-win { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20, 20, 40, .45); }
.kh-win__box { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(42rem, 100%); max-height: min(90vh, 54rem); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(20, 20, 40, .2); }
.kh-win__box:focus { outline: none; }
.kh-win__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--kh-line-2); }
.kh-win__title { margin: 0; font-size: max(12px, 1.125rem) !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kh-win__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; color: var(--kh-ink-2); cursor: pointer; }
.kh-win__close:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: 2px; }
.kh-win__body { min-height: 0; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
html.kh-win-open, html.kh-win-open body { overflow: hidden; }
@media (max-width: 599.98px) {
    .kh-win { align-items: stretch; padding: 0; }
    .kh-win__box { width: 100%; height: 100%; max-height: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
    .kh-win__head, .kh-win__body { padding-inline: 1rem; }
}

/* Brief 1018 (UX 999, «ملخص النموذج»): the city and the place in one line; the answers behind «إجاباتك (12) [راجعها]». */
.kr-jr__place { overflow-wrap: anywhere; }
.kr-jr__fold { margin: .25rem 0 .5rem; }
.kr-jr__fold > .kh-fold__body > .kr-jr__rows { margin: 0; }

/*
 * Brief 1207 (UX 1204 §4.3-4.8): the staged form. «الخدمات»: a section per provider (its role a heading), a card per
 * service across the card's width (its name 16/600, its lines 13), a long description three lines then «اقرأ المزيد»,
 * «أُضيفت الآن», and «أزل هذه الخدمة» a real button at least 44px high. Over a question of the offer's details the small
 * line of its section. The remove window in the middle of the page, over the site's header (as Ahmed's window), the
 * screen less 32px on a phone with its buttons one over the other. The summary's «ما طلبته» and its two answer groups,
 * each with «عدّل». Nothing scrolls sideways at 375px.
 */
.kr-svcs { display: grid; gap: 1rem; min-width: 0; margin: .25rem 0 0; }
.kr-svcs__group { display: grid; gap: .5rem; min-width: 0; }
.kr-svcs__h { margin: 0; font-size: max(12px, 1rem) !important; font-weight: 800 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-svcs__line { margin: 0; color: var(--kh-muted); font-size: max(12px, .8125rem); line-height: 1.6; }
.kr-svcs__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; min-width: 0; }
.kr-svc-card { display: grid; gap: .35rem; min-width: 0; padding: .75rem .9rem; border: 1px solid var(--kh-line); border-radius: 12px; background: #fff; }
.kr-svc-card[hidden] { display: none; }
.kr-svc-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; }
/* Brief 1251 (QA 1245): typography.css sets every span inside a p to 16px and 400 !important; the name keeps the design's 600, the badge its size. */
.kr-svc-card__name { font-size: max(12px, 1rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-svc-card__new { display: inline-flex; padding: .1rem .5rem; border-radius: 999px; background: var(--kh-ok-bg, #ECFDF3); color: var(--kh-ok, #027A48); font-size: max(12px, .75rem) !important; font-weight: 700 !important; line-height: 1.5 !important; white-space: nowrap; }
.kr-svc-card__desc, .kr-svc-card__why { margin: 0; font-size: max(12px, .8125rem); line-height: 1.6; color: var(--kh-ink-2, var(--kh-ink)); overflow-wrap: anywhere; }
.kr-svc-card__desc:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.kr-svc-card__why { color: var(--kh-muted); }
.kr-svc-card__more[hidden] { display: none; }
.kr-svc-card__more { justify-self: start; min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: var(--kh-primary-600); font: inherit; font-size: max(12px, .8125rem); font-weight: 700; cursor: pointer; }
.kr-svc-card__more:focus-visible, .kr-svc-card__rm:focus-visible, .kr-svcs__all:focus-visible { outline: 2px solid var(--kh-primary-600); outline-offset: 2px; }
.kr-svc-card__rm { justify-self: start; min-height: 44px; }
.kr-svcs__all { justify-self: start; min-height: 44px; }
.kr-svcs__note { margin: .75rem 0 0; color: var(--kh-muted); font-size: max(12px, .875rem); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.kr-jr__section { margin: 0 0 .15rem; color: var(--kh-primary-600); font-size: max(12px, .8125rem) !important; font-weight: 700 !important; line-height: 1.5 !important; }
.kr-jr__section-lead { margin-top: 0; }
.kr-rm { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 24, 40, .45); }
.kr-rm__box { display: grid; gap: .75rem; width: min(30rem, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 1.25rem; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(20, 20, 40, .2); animation: kr-jr-in .22s ease-out both; }
.kr-rm__title { margin: 0; font-size: max(12px, 1.125rem) !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--kh-ink); overflow-wrap: anywhere; }
.kr-rm__text { margin: 0; font-size: max(12px, .9375rem); line-height: 1.7; overflow-wrap: anywhere; }
#krRmText, [data-kr-rm-with], [data-kr-rm-then] { display: grid; gap: .5rem; }
.kr-rm__opts { display: grid; gap: .5rem; }
/* Live QA 2026-10-31: an answer of up to 500 characters keeps its radio on its first line; a short one stays centred (its
   one line is centred in the row, the radio on that line). */
.kr-rm__opt { display: flex; flex-wrap: wrap; align-content: center; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--kh-line); border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; }
.kr-rm__opt > span { flex: 1 1 0; min-width: 0; }
.kr-rm__opt input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; font: inherit; margin-top: calc((1lh - 1.1rem) / 2); accent-color: var(--kh-primary); }
.kr-rm__acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.kr-rm__acts .kh-btn { min-height: 44px; }
.kr-rm .kh-btn--danger { border-color: #a32020; background: #fff; color: #a32020; }
.kr-jr__asked { display: grid; gap: .35rem; margin: 0 0 .5rem; }
.kr-jr__asked-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kr-jr__asked-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: max(12px, .9375rem); line-height: 1.6; overflow-wrap: anywhere; }
.kr-jr__group { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; }
.kr-jr__group > .kh-fold { flex: 1 1 auto; min-width: 0; }
.kr-jr__edit-btn { flex: none; min-height: 44px; margin-top: .25rem; }
@media (max-width: 599.98px) {
    .kr-svc-card__rm, .kr-svcs__all { justify-self: stretch; width: 100%; }
    .kr-rm__box { width: calc(100vw - 32px); }
    .kr-rm__acts { flex-direction: column; }
    .kr-rm__acts .kh-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kr-rm__box { animation: none; } }

/* My services: readable chronology and labeled controls instead of a page-wide sparse row. */
.kr-page[data-model-id="client-khadamat-requests"] .kr-mf { display:grid; grid-template-columns:minmax(0, 2fr) minmax(14rem, 1fr); gap:1rem; background:#fff; padding:1rem; border:1px solid var(--kh-line); border-radius:12px; align-items:end; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-mf label { display:block; margin-bottom:.4rem; font-weight:700; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-mf select { -webkit-appearance:none; appearance:none; height:48px; box-sizing:border-box; padding-inline-end:2.5rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23695588' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left .75rem center; width:100%; min-height:48px; padding:.65rem; padding-inline-end:2.5rem; border:1px solid var(--kh-line); border-radius:8px; background-color:#fff; font:inherit; color:inherit; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-list { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; border:0; background:none; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-item { border:1px solid var(--kh-line); border-radius:12px; background:#fff; overflow:hidden; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-item__link { padding:1rem; flex-wrap:wrap; gap:.75rem; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-item__main { flex:1 1 65%; }
.kr-page[data-model-id="client-khadamat-requests"] .kr-item__act { flex-basis:100%; text-align:end; }
@media(max-width:900px){ .kr-page[data-model-id="client-khadamat-requests"] .kr-list {grid-template-columns:1fr;} }
@media(max-width:600px){ .kr-page[data-model-id="client-khadamat-requests"] .kr-mf {grid-template-columns:1fr;} }

.kr-page[data-model-id="client-khadamat-requests"] .kr-mf__search,
.kr-page[data-model-id="client-khadamat-requests"] .kr-mf__search .kh-inp,
.kr-page[data-model-id="client-khadamat-requests"] .kr-mf__pick { width:100%; max-width:none; }

/* Full answer-driven journey: independent actions side by side, every stage remains visible. */
.kr-path__items { grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:.75rem; }
.kr-path__item { border:1px solid var(--kh-line-2); border-radius:12px; padding:1rem; background:#fff; min-width:0; }
.kr-path__note { color:var(--kh-muted); font-size:.875rem; line-height:1.65; }

.kr-page[dir="ltr"][data-model-id="client-khadamat-requests"] .kr-mf select { background-position:right .75rem center; }

/* Service and directory filters keep the same readable control in Safari and Chromium. */
.kr-page select.kh-inp, .kr-page .kr-mf select, .pf-page select.kh-inp {
    -webkit-appearance:none; appearance:none; box-sizing:border-box; width:100%; min-width:0;
    min-height:48px; padding:10px 14px; padding-inline-end:40px; border:1px solid #d8d0e5;
    border-radius:10px; background-color:#fff; color:#352b4c; font:inherit; font-size:16px; line-height:1.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23695588' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
}
.kr-page[dir=rtl] select.kh-inp, .kr-page[dir=rtl] .kr-mf select { background-position:left 14px center; }
.kr-page select.kh-inp:focus-visible { outline:2px solid #7654c6; outline-offset:2px; }

.kr-svc-card__image { inline-size:88px; block-size:88px; object-fit:cover; border-radius:14px; float:inline-end; margin-inline-start:16px; margin-block-end:12px; }
.kr-svc-card::after { content:""; display:block; clear:both; }

/* Image options remain ordinary keyboard-operable answer buttons. */
.kr-jr__answers.kr-jr__answers--images { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
.kr-jr .kr-jr__answer--image { flex-direction: row; align-items: center; justify-content: flex-start; gap: .65rem; padding: .55rem .65rem; }
.kr-jr__answer--image > .kh-choice-image { width: 96px; height: 64px; flex: 0 0 96px; }
.kr-jr__answer--image > span:not(.kr-tick) { flex: 1; min-width: 0; text-align: start; }