/*
 * The owner's Khadamat client pages in the shared design (merge-uiux P5, from the approved design note p4-design-note.md):
 * «الخدمات» and «مقدمو الخدمات» are the services front door's cards with the underlined tabs of the service file and
 * «دع المهندس أحمد يساعدك» as its round "ask" pill; a service's request is the concierge window, «المهندس أحمد» on its night
 * purple side, the conversation a white card with its bar at the foot and its answers as choice cards; «خدماتي» is the
 * order review's list, one card holding its filters, its rows and its pager, inside the account's shell; a request is the
 * summary card with sticky underlined tabs; and a partner's page is the service file's summary and cards.
 * Loaded last by each of those views, whose root carries .kh-client, so it only restyles: no id, data-* or class the
 * scripts read is renamed. The owner's focus ring (library.css) is kept. typography.css pins h1–h3 and <p> with
 * !important, so the sizes that land on those carry !important too. Sizes are px: the html root is 14px on a phone.
 */

.kh-client {
    --khc-ink: #241b46;
    --khc-head: #372a58;
    --khc-brand: #3c2468;
    --khc-brand-hover: #4b2f86;
    --khc-purple: #6a5d8b;
    --khc-muted: #5f5a73;
    --khc-line: #ece8f3;
    --khc-card-line: #e1dfe8;
    --khc-row-line: #eee9f2;
    --khc-soft: #f4f2f9;
    --khc-night: #1d1540;
    --khc-gold: #d4a72c;
    --khc-shadow: 0 1px 2px rgba(55, 42, 88, .04), 0 10px 28px rgba(55, 42, 88, .07);
    color: var(--khc-ink);
}

/* ---------- the page head ---------- */
.kh-client .kr-title,
.kh-client.kp-page .kp-hero__name { letter-spacing: -.01em; }
.kh-client > .kr-title,
.kh-client .kr-head > .kr-title { margin: 6px 0 4px; color: var(--khc-ink) !important; font-size: clamp(24px, 2.4vw, 32px) !important; font-weight: 800 !important; line-height: 1.3 !important; }
.kh-client > .kr-hint,
.kh-client .kr-head + .kr-hint { margin: 0 0 18px; color: var(--khc-muted) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.7 !important; }

/* ---------- buttons and fields: the order review's ---------- */
.kh-client .kh-btn { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.kh-client .kh-btn--primary { border-color: var(--khc-brand); background: var(--khc-brand); color: #fff; }
.kh-client .kh-btn--primary:hover:not(:disabled) { border-color: var(--khc-brand-hover); background: var(--khc-brand-hover); color: #fff; }
.kh-client .kh-btn--ghost { border-color: #d8d0e2; background: #fff; color: var(--khc-brand); }
.kh-client .kh-btn--ghost:hover:not(:disabled) { border-color: var(--khc-purple); background: #f6f2fc; color: var(--khc-brand); }
.kh-client .kh-inp { min-height: 44px; border-color: #d8d1e4; border-radius: 12px; }

/* ---------- the tabs «الخدمات | مقدمو الخدمات»: the service file's underlined strip ---------- */
.kh-client .kr-tabs {
    gap: 4px;
    margin: 0 0 16px;
    padding: 0 12px;
    border: 1px solid var(--khc-card-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.kh-client .kr-tabs__tab {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    color: #6b7280;
    font-size: 15px;
    font-weight: 600;
}

.kh-client .kr-tabs__tab:hover { color: var(--khc-head); }
.kh-client .kr-tabs__tab:is([aria-current="page"], [aria-selected="true"]) { border-bottom-color: var(--khc-purple); color: var(--khc-brand); font-weight: 800; }

/* ---------- «الخدمات»: the search row, the ask pill and the front door's cards ---------- */
.kh-client .kr-tools { gap: 12px; margin-bottom: 18px; }
.kh-client .kr-mf__select,
.kh-client .kr-search .kh-inp { min-height: 46px; background-color: #fff; font-size: 15px; }
.kh-client .kr-calculator { min-height: 46px; padding-inline: 20px; }

/* «دع المهندس أحمد يساعدك»: the round pill with his face in a gold ring, his line, and a purple arrow at its end. */
.kh-client .kr-help {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 10px 16px;
    padding-inline-start: 84px;
    padding-inline-end: 72px;
    border: 1px solid var(--khc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--khc-ink);
    box-shadow: 0 12px 30px rgba(36, 27, 70, .08), 0 0 0 5px rgba(106, 93, 139, .06);
    text-align: start;
    transition: transform .2s ease, box-shadow .2s ease;
}

.kh-client .kr-help::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 12px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #efeaf8 url("../../../images/khadamat/ahmed/hello.webp") 50% 8% / 150% auto no-repeat;
    box-shadow: 0 0 0 3px #f5b942;
    transform: translateY(-50%);
}

/* The arrow: a purple disc with a chevron pointing the way the page reads. */
.kh-client .kr-help::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m11 18-6-6 6-6'/%3E%3C/svg%3E") 50% 50% / 20px 20px no-repeat,
        var(--khc-brand);
    transform: translateY(-50%);
}

.kh-client[dir="ltr"] .kr-help::after { transform: translateY(-50%) scaleX(-1); }
.kh-client .kr-help:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(36, 27, 70, .12), 0 0 0 6px rgba(106, 93, 139, .08); }
.kh-client .kr-help:focus-visible { outline: 3px solid var(--khc-purple); outline-offset: 3px; }
.kh-client .kr-help__text { display: grid; gap: 2px; min-width: 0; color: var(--khc-ink); font-size: 18px; font-weight: 800; line-height: 1.4; }
.kh-client .kr-help__lead { display: block; color: var(--khc-purple); font-size: 14px; font-weight: 700; }

/* The services' cards: white, a hairline edge and a soft shadow; the image on top, the words under it; lifted on hover. */
.kh-client .kr-cards--services { gap: 18px; }
.kh-client .kr-card--service .kr-card__link {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ebe6f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(44, 31, 79, .05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kh-client .kr-card--service .kr-card__link:hover { border-color: #cfc4e6; box-shadow: 0 14px 30px rgba(44, 31, 79, .14); transform: translateY(-3px); }
.kh-client .kr-card--service .kr-card__media { margin: 0; border-radius: 0; background: #f3effb; }
.kh-client .kr-card--service .kr-svc__txt { gap: 6px; padding: 16px 18px 18px; }
.kh-client .kr-card--service .kr-card__title { color: var(--khc-ink); font-size: 17px; font-weight: 800; line-height: 1.45; }
.kh-client .kr-card--service .kr-card__sum { color: var(--khc-muted); font-size: 14px; font-weight: 500; line-height: 1.7; -webkit-line-clamp: 3; line-clamp: 3; }
.kh-client .kr-card--service .kr-card__cities { padding-top: 10px; border-top: 1px solid var(--khc-row-line); color: var(--khc-purple); font-size: 13px; font-weight: 700; }

.kh-client .kr-skel__card { border-color: #ebe6f5; border-radius: 16px; }
.kh-client .kr-typed { padding: 12px 16px; border-radius: 12px; background: var(--khc-soft); color: var(--khc-head); font-weight: 700 !important; }

@media (max-width: 600px) {
    /* On a phone the card lies flat: the image beside the words, as before, in the same dress. */
    .kh-client .kr-cards--services { gap: 12px; }
    .kh-client .kr-card--service .kr-card__link { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
    .kh-client .kr-card--service .kr-card__media { flex: 0 0 104px; width: 104px; height: auto; min-height: 104px; }
    .kh-client .kr-card--service .kr-svc__txt { padding: 12px 14px; }
    .kh-client .kr-card--service .kr-card__title { font-size: 16px; }
    .kh-client .kr-card--service .kr-card__cities { padding-top: 6px; }

    /* Beside the calculator the pill is short: his face, his line, no arrow. */
    .kh-client .kr-tools > .kr-help { min-height: 46px; padding: 6px 12px; padding-inline-start: 52px; border-radius: 999px; box-shadow: 0 6px 16px rgba(36, 27, 70, .08); text-align: start; justify-content: flex-start; }
    .kh-client .kr-tools > .kr-help::before { inset-inline-start: 6px; width: 36px; height: 36px; box-shadow: 0 0 0 2px #f5b942; }
    .kh-client .kr-tools > .kr-help::after { display: none; }
    .kh-client .kr-help__text { font-size: 14px; line-height: 1.3; }
    .kh-client .kr-calculator { min-height: 46px; }
}

/* ---------- «مقدمو الخدمات»: the same tools, one list card ---------- */
.kh-client.pf-page .pf-list { border-color: #ebe6f5; border-radius: 16px; box-shadow: var(--khc-shadow); }
.kh-client.pf-page .pf-item + .pf-item { border-top-color: var(--khc-row-line); }
.kh-client.pf-page .pf-item__link:hover { background: #faf8fd; }
.kh-client.pf-page .pf-item__name { color: var(--khc-ink); font-weight: 800; }
.kh-client.pf-page .pf-item__open { min-block-size: 44px; border-radius: 12px; font-weight: 800; }
.kh-client.pf-page .pf-tool { color: var(--khc-head); font-size: 13px; font-weight: 700; }
.kh-client.pf-page .pf-count { color: var(--khc-head); }
.kh-client.pf-page .pf-pager__btn { min-width: 44px; min-height: 44px; border-radius: 12px; }
.kh-client.pf-page .pf-pager__btn.is-on { border-color: var(--khc-head); background: var(--khc-head); color: #fff; }
.kh-client.pf-page .pf-empty { padding: 32px 20px; border: 1px dashed #d9d3e8; border-radius: 16px; background: #fff; }
/* A row's parts in the same dress (brief 40): the logo as a white tile, the type as the status pill, the cities as the
   service card's purple line, «موثق» as a pill, the stars in the gold, the services quiet. */
.kh-client.pf-page .pf-item__logo { border-color: var(--khc-card-line); border-radius: 14px; background: #fff; }
.kh-client.pf-page .pf-item__initial { border-radius: 14px; }
.kh-client.pf-page .pf-item__initial--t0 { background: #eceaf6; color: #3d2e6b; }
.kh-client.pf-page .pf-item__type { padding: 3px 10px; border-radius: 999px; background: var(--khc-soft); color: var(--khc-head); font-size: 13px; font-weight: 700; line-height: 1.6; }
.kh-client.pf-page .pf-item__cities { color: var(--khc-purple); font-size: 14px; font-weight: 700; }
.kh-client.pf-page .pf-item__verified { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.kh-client.pf-page .pf-item__rating { color: var(--khc-head); font-size: 13px; font-weight: 800; }
.kh-client.pf-page .pf-item__rating--none,
.kh-client.pf-page .pf-item__votes,
.kh-client.pf-page .pf-item__works { color: var(--khc-muted); font-size: 13px; font-weight: 600; }
.kh-client.pf-page .pf-stars { color: #e6e1ee; }
.kh-client.pf-page .pf-stars > span { color: var(--khc-gold); }
.kh-client.pf-page .pf-item__services { color: var(--khc-muted); font-size: 14px; font-weight: 500; }
.kh-client .kr-status { color: var(--khc-muted); font-weight: 600; }

/* ---------- a service's request: the concierge window ---------- */
.kh-client .kr-hero { gap: 4px 16px; }
.kh-client .kr-hero .kr-title { color: var(--khc-ink) !important; font-size: 22px !important; font-weight: 800 !important; }
.kh-client .kr-hero .kr-hint { color: var(--khc-muted) !important; font-size: 15px !important; font-weight: 500 !important; }
.kh-client .kr-hero__thumb { border: 1px solid var(--khc-line); border-radius: 16px; box-shadow: 0 6px 16px rgba(36, 27, 70, .08); }

/* White choices sit on a soft purple form, including text-only answers. */
.kh-client .kr-jr__card { background: #f6f3fa; }
.kh-client .kr-jr .kr-jr__answer {
    border: 2px solid #9884b2;
    border-radius: 16px;
    background: #fff;
    color: var(--khc-ink);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(36, 31, 51, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kh-client .kr-jr .kr-jr__answer:hover { border-color: var(--khc-purple); background: #f2edf8; box-shadow: 0 12px 26px rgba(61, 42, 109, .12); transform: translateY(-2px); }
.kh-client .kr-jr .kr-jr__answer.is-on,
.kh-client .kr-jr .kr-jr__answer[aria-pressed="true"],
.kh-client .kr-jr .kr-jr__answer[aria-selected="true"] { border-color: var(--khc-purple); background: #eee7f7; color: var(--khc-brand); box-shadow: 0 0 0 1px var(--khc-purple), 0 12px 26px rgba(61, 42, 109, .1); }
.kh-client .kr-jr__go { border-radius: 14px; }
.kh-client .kr-msg .kr-jr__q,
.kh-client .kr-jr__q { color: var(--khc-ink); letter-spacing: -.01em; }
.kh-client .kr-jr__card .kr-jr__top { border-bottom-color: var(--khc-row-line); }

/* The city's list opens over what is under it, scrolling inside, so the card never grows while it is open (brief 41). */
.kh-client .kr-jr__city { position: relative; }
.kh-client .kr-jr__city > .kr-jr__cities { position: absolute; inset-inline: 0; top: calc(56px + .4rem); z-index: 20; box-shadow: 0 18px 40px rgba(29, 21, 64, .16); }

/* A saved draft: «ابدأ طلبًا جديدًا» and «أكمل المسودة السابقة» share the card's width, never wider than it (M2). */
.kh-client .kr-jr__foot--start { flex-wrap: wrap; }
.kh-client .kr-jr__foot--start > .kh-btn { flex: 1 1 12rem; min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.35; }

@media (min-width: 1100px) {
    /* One window: «المهندس أحمد» on the night purple side with the Sadu weave, the conversation on white beside him. */
    .kh-client .kr-jr__grid {
        /* «المهندس أحمد» on the end side: left in Arabic, right in English (brief 41). */
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas: "card stand";
        column-gap: 0;
        justify-content: stretch;
        align-items: stretch;
        margin-inline: auto;
        overflow: hidden;
        border: 1px solid var(--khc-line);
        border-radius: 28px;
        background: #fff;
        box-shadow: 0 30px 70px rgba(29, 21, 64, .14), 0 0 0 1px rgba(255, 255, 255, .6);
    }

    .kh-client .kr-stand {
        position: relative;
        top: auto;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 420px;
        padding: 28px 0;
        overflow: hidden;
        background:
            linear-gradient(180deg, rgba(29, 21, 64, .2) 0%, rgba(29, 21, 64, .65) 100%),
            url("../../../images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat,
            var(--khc-night);
        color: #fff;
    }

    .kh-client .kr-stand::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--khc-night);
        opacity: .78;
    }

    .kh-client .kr-stand > * { position: relative; z-index: 1; }
    .kh-client .kr-stand__fig { width: 300px; margin-inline: auto; filter: drop-shadow(0 18px 24px rgba(10, 5, 25, .35)); }
    .kh-client .kr-stand__fig::before { inset: 26% 4% 0; background: rgba(255, 255, 255, .1); }
    .kh-client .kr-stand__name { margin-top: 14px; color: #fff !important; font-size: 17px !important; }

    /* The conversation fills the window's height; its bar «رجوع | التالي» is the window's foot, edge to edge. */
    /* One fixed height for every screen of the request (brief 46): room for the usual questions, an 8-answer one and a
       location map included; a longer screen (the summary) scrolls inside the card, its bar always at the card's foot, and
       the city's list opens inside the scrolling body. */
    .kh-client .kr-jr__card { display: flex; flex-direction: column; height: 700px; padding: 30px 36px 0; border: 0; border-radius: 0; box-shadow: none; }
    .kh-client .kr-jr__card > .kr-jr__stage { flex: 1 1 auto; min-height: 0; padding-bottom: 26px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .kh-client .kr-jr__card > .kr-jr__foot { flex: none; }
    .kh-client .kr-jr__card > .kr-jr__foot { max-width: none; margin: 0 -36px; padding: 14px 36px; border-top: 1px solid var(--khc-line); background: #faf9fc; }
}

@media (max-width: 1099px) {
    .kh-client .kr-jr__grid { border-color: var(--khc-line); border-radius: 22px; background: #f6f3fa; box-shadow: 0 18px 44px rgba(29, 21, 64, .1); }
    .kh-client .kr-stand__name { color: var(--khc-ink) !important; }
}

@media (max-width: 767px) {
    .kh-client .kr-jr__grid { border-radius: 18px; }
    .kh-client .kr-stand__fig { box-shadow: 0 0 0 2px #f5b942; }
    .kh-client .kr-hero .kr-title { font-size: 18px !important; }
    .kh-client .kr-hero .kr-hint { font-size: 14px !important; }
    /* The draft's two choices one above the other at the card's width. */
    .kh-client .kr-jr__foot--start { flex-direction: column; }
    .kh-client .kr-jr__foot--start > .kh-btn { flex: 0 0 auto; width: 100%; }
}

/* ---------- «خدماتي»: the order review's list inside the account's shell ---------- */
.kh-client .kr-head { align-items: center; gap: 12px 16px; }
#krMineFilter.kr-mf { margin-bottom: 0; padding: 14px 16px; border: 1px solid #e4dfea; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, #fbfafd 0%, #f6f4f9 100%); }
#krMineFilter.kr-mf label { color: var(--khc-head); font-size: 13px; font-weight: 700; }
.kh-client #krMineFilter:not([hidden]) ~ #krBody { padding: 16px; border: 1px solid #e4dfea; border-top: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: var(--khc-shadow); }
.kh-client #krMineFilter[hidden] ~ #krBody .kr-list { box-shadow: var(--khc-shadow); }
.kh-client .kr-list { border-color: #e4dfea; border-radius: 14px; }
.kh-client .kr-item + .kr-item { border-top-color: var(--khc-row-line); }
.kh-client .kr-item__link:hover { background: #faf8fd; }
.kh-client .kr-item__title { color: var(--khc-ink); font-weight: 800; }
.kh-client .kr-item__num { color: var(--khc-purple); }
.kh-client .kr-item__status { padding: 3px 10px; border-radius: 999px; background: var(--khc-soft); font-size: 13px; }
.kh-client .kr-item__media { border-radius: 12px; }
.kh-client .kr-mine-tabs { padding: 0 8px; border: 1px solid var(--khc-card-line); border-radius: 14px; background: #fff; box-shadow: none; }
.kh-client .kr-mine-none,
.kh-client .kr-empty { border: 1px dashed #d9d3e8; border-radius: 16px; background: #fff; color: var(--khc-muted); }

/* The pager: outlined buttons, the page it is on in the heading ink, left to right in both languages. */
.kh-client .kr-pager { gap: 12px; margin-top: 16px; }
.kh-client .kr-pager .kh-btn { min-height: 44px; padding: 0 16px; border-color: #d8d0e2; background: #fff; color: var(--khc-head); }
.kh-client .kr-pager .kh-btn:hover:not(:disabled) { border-color: var(--khc-purple); background: #f3f0f7; }
.kh-client .kr-pager__at { color: var(--khc-head); font-size: 14px; font-weight: 700; }

/* ---------- a request: the summary card and its sticky underlined tabs ---------- */
.kh-client .kw-head { padding: 18px 20px; border: 2px solid #d8d0e2; border-radius: 14px; }
/* The request's title (#krTitle, the service and «KH-…», drawn by offers-core requestTitleHtml) in the summary's ink. */
.kh-client #krTitle .kh-title__flow { color: #191638; font-weight: 800; }
.kh-client .kw-prov { border-color: #e7e1ee; border-radius: 14px; }

.kh-client .kw-tabs {
    position: sticky;
    top: var(--client-fixed-header-offset, 0px);
    z-index: 5;
    gap: 4px;
    padding: 0 12px;
    border: 2px solid #d8d0e2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 14px -12px rgba(55, 42, 88, .35);
}

.kh-client .kw-tabs .kw-tab { min-height: 48px; padding: 12px 16px; border-bottom: 2px solid transparent; color: #6b7280; font-size: 15px; font-weight: 500; }
.kh-client .kw-tabs .kw-tab:hover { color: var(--khc-head); }
.kh-client .kw-tabs .kw-tab[aria-selected="true"] { border-bottom-color: var(--khc-purple); color: #3d2a6d; font-weight: 700; }
.kh-client :is(.kw-alerts__title, .kw-pay-group__title, .kw-next__title) { display: flex; align-items: center; gap: 8px; color: #3d2a6d; }
.kh-client :is(.kw-alerts__title, .kw-pay-group__title, .kw-next__title)::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--khc-purple); }
.kh-client .kr-actions .kh-btn { min-width: 10rem; justify-content: center; }

@media (max-width: 640px) {
    /* «خدماتي» on a phone: the title, its line, then «طلب خدمة جديد» at the card's width, never between the two. */
    .kh-client[data-model-id="client-khadamat-requests"] { display: flex; flex-direction: column; }
    .kh-client[data-model-id="client-khadamat-requests"] > .kr-head { display: contents; }
    .kh-client[data-model-id="client-khadamat-requests"] > .kr-head > .kh-btn { order: 1; width: 100%; margin: 0 0 16px; }
    .kh-client[data-model-id="client-khadamat-requests"] > .kr-hint ~ * { order: 2; }
    .kh-client .kw-tabs { padding: 0 4px; }
    .kh-client .kw-tabs .kw-tab { padding: 12px; font-size: 14px; }
    #krMineFilter.kr-mf { padding: 12px; }
    .kh-client #krMineFilter:not([hidden]) ~ #krBody { padding: 12px; }
    .kh-client .kr-pager { justify-content: space-between; }
}

/* ---------- a partner's page: the service file's summary and cards ---------- */
.kp-page.kh-client { background: transparent; }
.kp-page.kh-client .kp-hero {
    padding: 28px 28px 44px;
    border-radius: 26px;
    background: linear-gradient(100deg, #4b3a7e 0%, #3c2468 70%, #2c1a52 100%);
    box-shadow: 0 16px 36px rgba(60, 36, 104, .22);
}

/* The gold Sadu edge at the summary's foot, as on the services hub's hero. */
.kp-page.kh-client .kp-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 16px;
    pointer-events: none;
    background:
        linear-gradient(45deg, var(--khc-gold) 25%, transparent 25%) 0 4px / 12px 8px repeat-x,
        linear-gradient(-45deg, var(--khc-gold) 25%, transparent 25%) 0 4px / 12px 8px repeat-x,
        linear-gradient(135deg, var(--khc-gold) 25%, transparent 25%) 0 4px / 12px 8px repeat-x,
        linear-gradient(-135deg, var(--khc-gold) 25%, transparent 25%) 0 4px / 12px 8px repeat-x,
        linear-gradient(var(--khc-gold), var(--khc-gold)) 0 1px / 100% 1.5px no-repeat,
        linear-gradient(var(--khc-gold), var(--khc-gold)) 0 13.5px / 100% 1.5px no-repeat,
        #fbf6ea;
}

.kp-page.kh-client .kp-hero__logo { border: 4px solid #fff; border-radius: 22px; }
.kp-page.kh-client .kp-hero__name { font-size: clamp(22px, 2.6vw, 32px); }
.kp-page.kh-client .kp-hero__facts li { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px; background: rgba(255, 255, 255, .1); font-weight: 700; }

/* Each block is a card whose title sits on its border. */
.kp-page.kh-client .kp-box {
    margin-top: 14px;
    padding: 18px 20px 20px;
    border: 1px solid var(--khc-card-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(55, 42, 88, .04), 0 8px 24px rgba(55, 42, 88, .08);
}

.kp-page.kh-client .kp-box + .kp-box { margin-top: 30px; }
.kp-page.kh-client .kp-box__title {
    width: fit-content;
    max-width: calc(100% - 16px);
    margin: -32px 0 12px;
    margin-inline-start: -4px;
    padding: 0 10px;
    background: linear-gradient(to bottom, transparent 50%, #fff 50%);
    color: var(--khc-head);
    font-size: 19px;
    font-weight: 800;
}

.kp-page.kh-client .kp-box__icon { width: 32px; height: 32px; background: #eceaf6; color: #3d2e6b; }
.kp-page.kh-client .kp-grid { margin-top: 32px; }
.kp-page.kh-client .kp-service { border-color: var(--khc-row-line); border-radius: 12px; background: #fcfbfe; }
.kp-page.kh-client .kp-work { border-color: #ebe6f5; border-radius: 14px; }
.kp-page.kh-client .kp-work:hover { border-color: #cfc4e6; box-shadow: 0 14px 30px rgba(44, 31, 79, .12); }
.kp-page.kh-client .kp-city { background: var(--khc-soft); color: var(--khc-head); }
.kp-page.kh-client .kp-na { border: 1px solid var(--khc-card-line); border-radius: 18px; box-shadow: var(--khc-shadow); }
.kp-page.kh-client .kp-btn { border-radius: 12px; background: var(--khc-brand); font-weight: 800; }
.kp-page.kh-client .kp-btn:hover { background: var(--khc-brand-hover); }
.kp-page.kh-client .kp-hero__request { background: #fff; color: var(--khc-brand); }
.kp-page.kh-client .kp-hero__request:hover { background: #f1eef8; color: var(--khc-brand); }

@media (max-width: 640px) {
    .kp-page.kh-client .kp-hero { padding: 24px 16px 38px; border-radius: 22px; }
    .kp-page.kh-client .kp-box { padding: 14px 14px 16px; }
    .kp-page.kh-client .kp-box__title { font-size: 17px; }
}

/* ---------- the services' inner parts in Abdulrahman's design (brief 44, ux-42 rows 11-26, client side) ---------- */
.kh-client {
    --khc-run: #5135a0;
    --khc-done: #18794a;
    --khc-turn: #a35a06;
    --khc-stop: #b42318;
    --khc-wait: #6a6178;
}

/* 11. A request's sections (path, payments, record, answers, files) as his panels: a light head with a short bar. */
.kh-client .kw .kh-pv-q.kr-q:not(.ko-form):not(.ko-now):not(.kw-escalate):not(.ko) { padding: 0 16px 16px; border: 1px solid #e7e1ee; border-radius: 14px; background: #fff; box-shadow: none; }
.kh-client .kw .kh-pv-q.kr-q:not(.ko-form):not(.ko-now):not(.kw-escalate):not(.ko) > :is(h2.kh-pv-q__title, summary.kh-pv-q__title, .kw-tl__head) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 -16px 14px !important;
    padding: 12px 16px;
    border-bottom: 1px solid #eee9f2;
    border-radius: 13px 13px 0 0;
    background: #faf8fc;
    color: #3d2a6d;
}
.kh-client .kw .kh-pv-q.kr-q:not(.ko-form):not(.ko-now):not(.kw-escalate):not(.ko) > :is(h2.kh-pv-q__title, summary.kh-pv-q__title)::before,
.kh-client .kw .kh-pv-q.kr-q > .kw-tl__head > .kh-pv-q__title::before { content: ""; flex: none; width: 4px; height: 16px; border-radius: 2px; background: var(--khc-purple); }
.kh-client .kw .kh-pv-q.kr-q :is(h2.kh-pv-q__title, summary.kh-pv-q__title) { color: #3d2a6d; font-size: 15px !important; font-weight: 800 !important; line-height: 1.35 !important; }
.kh-client .kw .kh-pv-q.kr-q > .kw-tl__head > .kh-pv-q__title { display: flex; align-items: center; gap: 8px; margin: 0; }
.kh-client .kw details.kh-pv-q.kr-q:not([open]) { padding-bottom: 0; }
.kh-client .kw details.kh-pv-q.kr-q:not([open]) > summary.kh-pv-q__title { margin-bottom: 0 !important; border-bottom: 0; border-radius: 13px; }

/* 13. The «الآن» card: a soft lilac card; each thing to do a light row with the brand button. */
.kh-client .kw-now { border: 1px solid #cbbfe3; border-radius: 16px; background: #fcfbff; box-shadow: 0 1px 2px rgba(55, 42, 88, .04), 0 6px 18px rgba(55, 42, 88, .05); }
.kh-client .kw-now[data-kw-now="at"], .kh-client .kw-now[data-kw-now="together"], .kh-client .kw-now[data-kw-now="idle"] { border-color: #e6e1ee; background: #fff; }
.kh-client .kw-now[data-kw-now="done"] { border-color: #cde9da; background: #f5fbf8; }
.kh-client .kw-now__item { padding: 12px 14px; border: 0; border-radius: 12px; background: #f3f1f8; }
.kh-client .kw-now :is(.kw-now__line, .kw-now__title) { color: #191638; }
.kh-client .kw-now :is(.kw-now__act, .kw-next__act) .kh-btn--primary { min-height: 44px; border-color: var(--khc-brand); border-radius: 10px; background: var(--khc-brand); }
.kh-client .kw-now :is(.kw-now__act, .kw-next__act) .kh-btn--primary:hover:not(:disabled) { border-color: #2e1b52; background: #2e1b52; }
.kh-client .kw-now .kw-stage__pay { border-color: #ebe8f0; border-radius: 12px; }

/* 14. Status pills: his badge, a dot in the ink, a ring and a ground mixed from it; violet running, green done, amber the
   client's move, red stopped, grey waiting. */
.kh-client :is(.kr-item__status, .kw-chip, .kw-status, .kr-badge.ko-status) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 11px;
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, #fff);
    color: var(--khc-wait);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}
.kh-client p .kw-status { font-size: 13px !important; font-weight: 800 !important; }
.kh-client :is(.kw-chip, .kw-status, .kr-badge.ko-status)::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kh-client .kr-item__status::before { width: 7px; height: 7px; }
.kh-client :is(.kr-item__status[data-kr-tone="inProgress"], .kr-item__status[data-kr-tone="sent"], .kw-status,
    .kw-chip:is([data-kw-state="started"], [data-kw-state="submitted"], [data-kw-state="paying"], [data-kw-state="proofSent"], [data-kw-state="held"]),
    .kr-badge.ko-status.ko-badge--info) { color: var(--khc-run); }
.kh-client :is(.kr-item__status:is([data-kr-tone="completed"], [data-kr-tone="external"]), .kw-status[data-kw-status="completed"],
    .kw-chip:is([data-kw-state="approved"], [data-kw-state="paid"], [data-kw-state="released"], [data-kw-state="received"], [data-kw-column="awarded"]),
    .kr-badge.ko-status.ko-badge--ok) { color: var(--khc-done); }
.kh-client :is(.kr-item__status:is([data-kr-tone="awaitingPayment"], [data-kr-tone="offersReady"]), .kw-chip:is([data-kw-state="ready"], [data-kw-state="due"])) { color: var(--khc-turn); }
.kh-client :is(.kr-item__status:is([data-kr-tone="stopped"], [data-kr-tone="cancelled"]), .kw-status[data-kw-status="stopped"],
    .kw-chip:is([data-kw-state="returned"], [data-kw-state="overdue"])) { color: var(--khc-stop); }
.kh-client .kr-badge.ko-status.ko-badge--muted { color: var(--khc-wait); }
/* The client's request page paints every chip lilac (work.css:597-603); the shared recipe instead, as the journey graph's
   (its «ready» and «due» amber), the waiting ones grey. */
.kh-client .kw[data-kw-viewer="client"] :is(.kw-chip, .kw-status) { background: color-mix(in srgb, currentColor 11%, #fff); color: var(--khc-run); }
.kh-client .kw[data-kw-viewer="client"] .kw-chip:is([data-kw-state="waiting"], [data-kw-state="external"]) { color: var(--khc-wait); }
.kh-client .kw[data-kw-viewer="client"] .kw-chip:is([data-kw-state="ready"], [data-kw-state="due"]) { color: var(--khc-turn); }
.kh-client .kw[data-kw-viewer="client"] :is(.kw-chip:is([data-kw-state="approved"], [data-kw-state="paid"], [data-kw-state="released"], [data-kw-state="received"], [data-kw-column="awarded"]), .kw-status[data-kw-status="completed"]) { color: var(--khc-done); }
.kh-client .kw[data-kw-viewer="client"] :is(.kw-chip:is([data-kw-state="returned"], [data-kw-state="overdue"], [data-kw-overdue]), .kw-status[data-kw-status="stopped"]) { color: var(--khc-stop); }

/* 16. «خدماتي»: a request that needs the client, his amber bar on the start side. */
.kh-client :is(.kr-sec--action .kr-item__link, .kr-item--action .kr-item__link) { border-inline-start: 3px solid #f6c443; }
.kh-client .kr-item--action .kr-item__turn { color: var(--khc-turn); }

/* 17. Provider cards: his request cards, a 40px logo tile. */
.kh-client .kw-prov { gap: 12px; padding: 14px 16px; border: 1px solid #ebe6f2; border-radius: 14px; background: #fff; }
.kh-client .kw-prov[data-kw-column="external"] { background: #fcfbfe; }
.kh-client .kw-prov__logo { width: 40px; height: 40px; border-radius: 10px; background: #f6f3fb; }
.kh-client .kw-prov__logo--none { color: #3d2a6d; }
.kh-client .kw-prov__name { color: #191638; }
.kh-client .kw-prov__label { color: #716d7d; font-size: 13px; }
.kh-client .kw-prov__more > summary { display: flex; align-items: center; min-height: 44px; }

/* 18. A tab's count as his round badge: the brackets stay in the text for screen readers and copying, the number shows. */
.kh-client :is(.kr-sec__n, .kw-tab__count) { font-size: 0; }
.kh-client :is(.kr-sec__num, .kw-tab__count > bdi) {
    display: inline-grid;
    min-width: 22px;
    min-height: 22px;
    margin-inline-start: 6px;
    padding-inline: 5px;
    place-items: center;
    border-radius: 999px;
    background: var(--khc-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* 19. The record as his short timeline (dot, rail, time first); the head's notifications as his note card. */
.kh-client .kw-events { gap: 0; }
.kh-client .kw-events li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 14px; padding-inline-start: 20px; border-bottom: 0; color: #191638; font-size: 13px; }
.kh-client .kw-events li::before { content: ""; position: absolute; top: 5px; inset-inline-start: 2px; width: 9px; height: 9px; border-radius: 50%; background: #b9aed0; }
.kh-client .kw-events li:not(:last-child)::after { content: ""; position: absolute; top: 16px; bottom: 0; inset-inline-start: 6px; width: 1px; background: #e7e1ee; }
.kh-client .kw-events__at { color: #6b6478; font-size: 12px; font-weight: 600; }
.kh-client .kw-events__text { color: #191638; font-weight: 700; }
.kh-client .kw-events__who { font-weight: 800; }
.kh-client .kw-alerts { gap: 10px; padding: 14px 16px; border: 1px solid #ece8f3; border-radius: 16px; background: #fff; }
.kh-client .kw-alerts__list li { color: #191638; font-size: 13px; }
.kh-client .kw-alerts__at { color: #6b6478; font-size: 12px; font-weight: 600; }

/* 20. Offer cards and the quote fee: his offer cards (a dashed line above the foot, the button the card's width). */
.kh-client .ko-card { padding: 14px; border: 1px solid #e2dcec; border-radius: 16px; box-shadow: 0 4px 14px rgba(70, 53, 100, .05); }
.kh-client .ko-card.is-won { border-color: #bfe3cb; box-shadow: 0 4px 14px rgba(70, 53, 100, .05); }
.kh-client .ko-card__name { color: #191638; font-size: 17px; line-height: 1.35; }
.kh-client .ko-card__total { padding-top: 12px; border-top: 1px dashed #e2dcec; color: var(--khc-brand); }
.kh-client .ko-card .kr-actions .kh-btn { flex: 1 1 100%; justify-content: center; }
.kh-client .ko-row { border-color: #e2dcec; border-radius: 16px; background: #fff; box-shadow: 0 4px 14px rgba(70, 53, 100, .05); }
.kh-client .ko-row.is-won { border-color: #bfe3cb; }
.kh-client .ko-row__facts { border-top-style: dashed; border-top-color: #e2dcec; }
.kh-client .ko-row .ko-card__name, .kh-client .ko-row__who strong { color: #191638; }
.kh-client .ko-fee--due { gap: 18px; padding: 24px; border: 2px solid #ddd5e8; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(67, 52, 99, .08); }
.kh-client .ko-fee__title { color: #191638; font-size: 18px !important; font-weight: 900; }
.kh-client .ko-fee--due .kh-btn { min-height: 46px; }
.kh-client .ko :is(.kh-inp, .kh-btn) { min-height: 44px; }
.kh-client .ko-tools :is(.ko-tool--sort .kh-inp, .ko-filters > .ko-filters__btn) { height: 44px; }
.kh-client .ko-row .ko-row__file { min-height: 44px; }

/* 22. Payments: his table (a light head row, 14px cells) and his totals (the number above its label). */
.kh-client .kw-pay-table { border-color: #ebe6f2; border-radius: 14px; }
.kh-client .kw-pay-table th { padding: 12px 14px; background: #faf8fd; color: #6b6478; font-size: 13px; font-weight: 800; }
.kh-client .kw-pay-table td { padding: 14px; border-top-color: #ebe6f2; color: #191638; }
.kh-client .kw-pay__amount { color: var(--khc-brand); }
.kh-client .kw-pay-sum__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-color: #eee9f2; border-radius: 10px; background: #fcfbfe; }
.kh-client .kw-pay-sum__item.kr-fact dt { order: 2; color: #6b6478; font-size: 12px; font-weight: 700; }
.kh-client .kw-pay-sum__item.kr-fact dd { order: 1; margin: 0; color: #191638; font-size: 20px; font-weight: 800; line-height: 1.2; }
.kh-client .kw-pay-sum__item.kr-fact[data-kw-sum="left"] dd { color: var(--khc-brand); }
.kh-client .kw[data-kw-viewer="client"] .kr-facts.kw-pay-sum { border-color: #eee9f2; background: #fcfbfe; }

/* 23. Files and answers: his file rows and his two-column answers. */
.kh-client .kr-files:not(.kr-files--answer) { gap: 8px; }
.kh-client .kr-files:not(.kr-files--answer) > li { align-items: center; padding: 8px 10px; border: 1px solid #e3dcef; border-radius: 10px; background: #faf8fc; }
.kh-client .kr-files:not(.kr-files--answer) > li:last-child { border-bottom: 1px solid #e3dcef; }
.kh-client .kr-files :is(a, .kh-link) { display: inline-flex; align-items: center; min-height: 44px; color: #6a5d8b; font-size: 13px; font-weight: 800; }
.kh-client .kr-files__need { color: #191638; font-size: 13px; font-weight: 700; }
.kh-client .kr-facts--stack { gap: 0; }
.kh-client .kr-facts--stack > .kr-fact { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 13px 0; border-bottom: 1px solid #eee9f2; }
.kh-client .kr-facts--stack > .kr-fact:last-child { border-bottom: 0; }
.kh-client .kr-fact dt { color: #6b6478; font-size: 13px; font-weight: 600; }
.kh-client .kr-fact dd { margin: 0; color: #191638; font-size: 14px; font-weight: 700; line-height: 1.5; }

/* 24. Progress: his thin green bar on a lilac track. */
.kh-client .kh-progress__track { height: 6px; background: #ece8f3; }
.kh-client .kh-progress__fill { background: #1f8a4c; }
.kh-client .kh-progress__num { color: #1f8a4c; }

/* 25. Dialogs: his frame (500px at most, 20px in), 44px buttons with a 10px radius, the red one for a refusal or cancel. */
.kh-client :is(.kw-dialog__box:not(.kw-sd__box), .ko-dialog__box) { width: min(500px, 100%); padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
.kh-client :is(.kw-dialog, .ko-dialog) .kh-btn { min-height: 44px; border-radius: 10px; font-weight: 800; }
.kh-client :is(.kw-dialog, .ko-dialog) .kh-btn--danger { border-color: var(--khc-stop); background: var(--khc-stop); color: #fff; }
.kh-client :is(.kw-dialog__title, .ko-dialog__title) { color: #191638; }
.kh-client :is(.kw-dialog__text, .ko-dialog__text) { color: #5f5968; }

/* 26. Empty states: his dashed card, the text in a readable grey. */
.kh-client :is(.kr-empty, .kr-mine-none, .ko-empty) { padding: 26px 16px; border: 1.5px dashed #e3dfec; border-radius: 16px; background: #fff; color: #6b6680; font-size: 14px !important; font-weight: 600 !important; text-align: center; }
.kh-client .kr-status[role="status"] { color: #6b6680; font-weight: 600; }

@media (max-width: 640px) {
    .kh-client .kw .kh-pv-q.kr-q:not(.ko-form):not(.ko-now):not(.kw-escalate):not(.ko) { padding: 0 12px 12px; }
    .kh-client .kw .kh-pv-q.kr-q:not(.ko-form):not(.ko-now):not(.kw-escalate):not(.ko) > :is(h2.kh-pv-q__title, summary.kh-pv-q__title, .kw-tl__head) { margin: 0 -12px 12px !important; padding: 12px; }
    .kh-client .kr-facts--stack > .kr-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .kh-client .kw-pay-table td { padding: 6px 12px; }
}

@media (max-width: 480px) {
    .kh-client :is(.kw-dialog, .ko-dialog) .kr-actions { flex-direction: column-reverse; }
    .kh-client :is(.kw-dialog, .ko-dialog) .kr-actions > .kh-btn { flex: 0 0 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .kh-client .kr-help,
    .kh-client .kr-card--service .kr-card__link,
    .kh-client .kr-jr .kr-jr__answer { transition: none; }
    .kh-client .kr-help:hover,
    .kh-client .kr-card--service .kr-card__link:hover,
    .kh-client .kr-jr .kr-jr__answer:hover { transform: none; }
}