/*
 * «مقدمو الخدمات» (brief 325): the search and filters, the partners' rows and the pages, in the services pages' look
 * (library.css's .kh-lib colours and buttons, requests.css's title). Every rule is scoped to .pf-page except the page lock
 * of the phone's pop-up; sides are logical, so Arabic reads from the right; no text under 12px; nothing scrolls sideways
 * at 375px. typography.css sets every <p> with !important, so a class that styles a <p> here carries !important on its
 * size and line height. Brief 778: the type, the sort, one «موثّق», the stars, the filters in a pop-up on a phone.
 * Brief 799 (QA 791): the completed works beside the stars; the pop-up's close button a 44px target.
 */

.pf-page .pf-link-services { text-decoration: none; white-space: nowrap; }
/* Brief 340: «فلترة» opens the filters on a phone only; a desktop shows them as they are. */
.pf-page .pf-filter-toggle { display: none; }

/* ---------- the search and filters ---------- */
.pf-page .pf-tools { display: grid; gap: .85rem; margin: 0 0 1.1rem; }
.pf-page .pf-tools__bar { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .75rem; }
.pf-page .pf-tools__row { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem .75rem; }
.pf-page .pf-tool { display: grid; gap: .25rem; flex: 1 1 9rem; min-width: 0; margin: 0; font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); }
.pf-page .pf-tool .kh-inp { width: 100%; min-width: 0; }
.pf-page .pf-tool--search { flex: 2 1 18rem; }
.pf-page .pf-filter-row { flex: 3 1 28rem; min-width: 0; }
/* The pop-up's own parts belong to the phone. Brief 940 (owner: dropdowns for filters): the type is a dropdown beside the
   city and the service on every width, no chips. */
.pf-page .pf-sheet__head,
.pf-page .pf-sheet__actions,
.pf-page .pf-backdrop { display: none; }

.pf-page .pf-tools__count { align-items: center; justify-content: space-between; min-block-size: 2.75rem; }
.pf-page .pf-count { margin: 0; font-size: max(12px, .875rem) !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--kh-ink); }

/* ---------- the rows (brief 415: a list, not cards) ---------- */
.pf-page .pf-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kh-line-2); border-radius: 16px; background: #fff; overflow: hidden; }
.pf-page .pf-item + .pf-item { border-top: 1px solid var(--kh-line-2); }
/* Brief 426: fixed columns in every row (the logo with the name and type, the cities, the link), as «خدماتي». */
.pf-page .pf-item__link { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 8rem; grid-template-areas: "head info open"; align-items: center; gap: .5rem 1.25rem; min-width: 0; padding: .9rem 1.1rem; color: var(--kh-ink-2); text-decoration: none; }
.pf-page .pf-item__link:hover { background: var(--kh-primary-50); }
.pf-page .pf-item__link:focus-visible { outline: 2px solid var(--kh-primary); outline-offset: -2px; }
.pf-page .pf-item__head { grid-area: head; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pf-page .pf-item__logo,
.pf-page .pf-item__initial { flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px; }
.pf-page .pf-item__logo { object-fit: contain; border: 1px solid var(--kh-line-3); background: #fff; }
.pf-page .pf-item__initial { display: inline-flex; align-items: center; justify-content: center; background: var(--kh-primary-50); color: var(--kh-primary-600); font-size: max(12px, 1.125rem); font-weight: 800; }
.pf-page .pf-item__initial[hidden] { display: none; }
/* The first letter's tones: soft grounds from the platform's palette, each with a dark ink that reads on it. */
.pf-page .pf-item__initial--t0 { background: var(--kh-primary-100); color: var(--kh-primary-600); }
.pf-page .pf-item__initial--t1 { background: #E6F4F1; color: #12655A; }
.pf-page .pf-item__initial--t2 { background: #FFF4E5; color: #93520A; }
.pf-page .pf-item__initial--t3 { background: #EAF1FB; color: #24508F; }
.pf-page .pf-item__initial--t4 { background: #FBEAF0; color: #8E2F55; }
.pf-page .pf-item__initial--t5 { background: #EEF2E6; color: #4A6420; }

.pf-page .pf-item__who { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; flex: 1 1 auto; min-width: 0; }
.pf-page .pf-item__name { font-size: max(12px, 1rem); font-weight: 800; line-height: 1.4; color: var(--kh-ink); overflow-wrap: anywhere; }
.pf-page .pf-item__type { display: inline-flex; padding: .05rem .5rem; border-radius: 6px; background: var(--kh-grey-bg); color: var(--kh-grey); font-size: max(12px, .75rem); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }

.pf-page .pf-item__info { grid-area: info; display: grid; gap: .4rem; min-width: 0; }
.pf-page .pf-item__line2,
.pf-page .pf-item__line3 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; min-width: 0; }
.pf-page .pf-item__cities { font-size: max(12px, .875rem); font-weight: 600; color: var(--kh-ink-2); overflow-wrap: anywhere; }

/* The stars to the nearest half: grey ones underneath, the gold share over them from the start side. */
.pf-page .pf-item__rating { display: inline-flex; align-items: center; gap: .3rem; font-size: max(12px, .8125rem); font-weight: 700; color: var(--kh-ink-2); white-space: nowrap; }
.pf-page .pf-item__rating--none { font-weight: 600; color: var(--kh-muted); }
.pf-page .pf-item__votes { font-weight: 600; color: var(--kh-muted); }
.pf-page .pf-stars { position: relative; display: inline-block; font-size: max(12px, .875rem); line-height: 1; letter-spacing: 1px; color: #D9DCE3; }
.pf-page .pf-stars::before { content: "★★★★★"; }
.pf-page .pf-stars > span { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; color: #E9A23B; }
/* Brief 799: the completed works beside the stars, quiet like the votes. */
.pf-page .pf-item__works { font-size: max(12px, .8125rem); font-weight: 600; color: var(--kh-muted); white-space: nowrap; }
.pf-page .pf-stars--0 > span { inline-size: 0; }
.pf-page .pf-stars--5 > span { inline-size: 10%; }
.pf-page .pf-stars--10 > span { inline-size: 20%; }
.pf-page .pf-stars--15 > span { inline-size: 30%; }
.pf-page .pf-stars--20 > span { inline-size: 40%; }
.pf-page .pf-stars--25 > span { inline-size: 50%; }
.pf-page .pf-stars--30 > span { inline-size: 60%; }
.pf-page .pf-stars--35 > span { inline-size: 70%; }
.pf-page .pf-stars--40 > span { inline-size: 80%; }
.pf-page .pf-stars--45 > span { inline-size: 90%; }
.pf-page .pf-stars--50 > span { inline-size: 100%; }

/* One «موثّق»: every partner here has a file the platform approved. */
.pf-page .pf-item__verified { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .25rem; padding: .1rem .55rem; border-radius: 999px; background: var(--kh-ok-bg); color: var(--kh-ok); font-size: max(12px, .75rem); font-weight: 700; line-height: 1.6; }
.pf-page .pf-item__verified svg { flex: 0 0 auto; }
/* The main services in one short line. */
.pf-page .pf-item__services { flex: 1 1 10rem; min-width: 0; overflow: hidden; color: var(--kh-muted); font-size: max(12px, .8125rem); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

.pf-page .pf-item__open { grid-area: open; justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-block-size: 2.5rem; padding: 0 .9rem; border: 1px solid var(--kh-primary); border-radius: 10px; background: #fff; color: var(--kh-primary-600); font-size: max(12px, .875rem); font-weight: 700; white-space: nowrap; }
.pf-page .pf-item__link:hover .pf-item__open { background: var(--kh-primary); color: #fff; }

/* ---------- the pages ---------- */
.pf-page .pf-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin: 1.25rem 0 0; }
.pf-page .pf-pager__btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; padding: 0 .75rem; border: 1px solid var(--kh-line-2); border-radius: 10px; background: #fff; color: var(--kh-ink-2); font-size: max(12px, .875rem); font-weight: 700; cursor: pointer; }
.pf-page .pf-pager__btn:hover { background: var(--kh-primary-50); }
.pf-page .pf-pager__btn.is-on { border-color: var(--kh-primary); background: var(--kh-primary-50); color: var(--kh-primary-600); }
.pf-page .pf-pager__gap { padding: 0 .25rem; color: var(--kh-muted); font-size: max(12px, .875rem); }

/* ---------- none ---------- */
.pf-page .pf-empty { display: grid; justify-items: center; gap: .65rem; padding: 2.75rem 1rem; border: 1px solid var(--kh-line-2); border-radius: 16px; background: #fff; text-align: center; }
.pf-page .pf-empty__mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 4.5rem; block-size: 4.5rem; margin-block-end: .25rem; border-radius: 50%; background: var(--kh-primary-50); color: var(--kh-primary); }
.pf-page .pf-empty__icon { inline-size: 2.25rem; block-size: 2.25rem; }
.pf-page .pf-empty__title { margin: 0; font-size: max(12px, 1.125rem); font-weight: 800; color: var(--kh-ink); }
.pf-page .pf-empty__text { max-inline-size: 32rem; margin: 0; font-size: max(12px, .875rem) !important; line-height: 1.6 !important; color: var(--kh-muted); }
.pf-page .pf-empty .kh-btn { margin-block-start: .35rem; }

/* The page behind the phone's pop-up does not scroll. */
html.pf-locked { overflow: hidden; }

@media (max-width: 600px) {
    .pf-page .pf-item__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head open" "info info"; gap: .6rem .75rem; padding: .85rem .85rem; }
    .pf-page .pf-item__open { min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0 .65rem; font-size: max(12px, .8125rem); }
    .pf-page .pf-item__name { font-size: max(12px, .9375rem); }
    .pf-page .pf-item__services { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
    .pf-page .pf-link-services { flex: 1 1 100%; justify-content: center; }

    /* The search and «فلترة» share a line; the filters wait behind it. */
    .pf-page .pf-tools__bar { flex-wrap: nowrap; align-items: stretch; }
    .pf-page .pf-tool--search { flex: 1 1 auto; }
    .pf-page .pf-filter-toggle { display: inline-flex; flex: 0 0 auto; justify-content: center; padding: 0 1rem; }
    .pf-page .pf-filter-row:not(.is-open) { display: none; }

    /* «فلترة» opens a pop-up from the bottom, over the page's fixed header (as .ko-dialog). */
    .pf-page .pf-backdrop { display: block; position: fixed; inset: 0; z-index: 100009; background: rgba(20, 20, 40, .45); }
    .pf-page .pf-filter-row.is-open { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 100010; display: grid; align-items: stretch; gap: .85rem; max-block-size: 85vh; overflow-y: auto; padding: 1rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -12px 40px rgba(20, 20, 40, .2); }
    .pf-page .pf-filter-row.is-open .pf-tool { flex: none; font-size: max(12px, .875rem); color: var(--kh-ink-2); }
    .pf-page .pf-filter-row.is-open .pf-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
    .pf-page .pf-sheet__title { margin: 0; font-size: max(12px, 1.125rem); font-weight: 800; color: var(--kh-ink); }
    /* Brief 799 (refute 785: 39px under the 14px root): 44px, not 2.75rem. */
    .pf-page .pf-sheet__close { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 10px; background: var(--kh-grey-bg); color: var(--kh-ink-2); font-size: max(12px, 1.5rem); line-height: 1; cursor: pointer; }
    .pf-page .pf-filter-row.is-open .pf-sheet__actions { display: flex; flex-wrap: wrap; gap: .6rem; padding-block-start: .25rem; }
    .pf-page .pf-sheet__actions .kh-btn { flex: 1 1 100%; justify-content: center; }
}

/* Readable provider rows: stable identity column, wrapping services and clear actions. */
.pf-page .pf-item__link { grid-template-columns:minmax(230px,1fr) minmax(0,1.7fr) 120px; gap:24px; padding:24px; }
.pf-page .pf-item__who { display:grid; gap:6px; justify-items:start; }
.pf-page .pf-item__logo, .pf-page .pf-item__initial { inline-size:56px; block-size:56px; }
.pf-page .pf-item__name { font-size:17px; line-height:1.65; }
.pf-page .pf-item__type, .pf-page .pf-item__cities, .pf-page .pf-item__services { font-size:14px; line-height:1.8; }
.pf-page .pf-item__services { white-space:normal; overflow-wrap:anywhere; }
.pf-page .pf-item__info { gap:10px; }
.pf-page .pf-item__open { min-height:44px; font-size:14px; }
.pf-page .pf-tool { font-size:14px; gap:8px; }
@media(max-width:850px) {
    .pf-page .pf-item__link { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head open" "info info"; gap:16px; padding:20px; }
}
@media(max-width:450px) {
    .pf-page .pf-item__link { grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "info" "open"; }
    .pf-page .pf-item__open { justify-self:start; }
}