/* =============================================================================
 * Servly — Find-a-pro (search results) + provider profile
 * Consumes tokens.css; pairs with servly.css. svly-srch-* / svly-prov-* classes.
 * ========================================================================== */

/* ---- Search / filter bar --------------------------------------------------- */
.svly-srch {
    background: var(--color-ink);
    color: #fff;
    padding-block: var(--s-10) var(--s-12);
}
.svly-srch h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.6rem,3.5vw,var(--t-4xl)); margin: 0 0 var(--s-5); letter-spacing: var(--ls-tight); }
.svly-srch__form {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2);
    background: #fff; border-radius: var(--r-2xl); padding: var(--s-2); box-shadow: var(--e-shadow-3);
    max-width: 760px;
}
.svly-srch__field { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; border-radius: var(--r-xl); }
.svly-srch__field + .svly-srch__field { border-left: 1px solid var(--color-border); border-radius: 0; }
.svly-srch__field svg { width: 20px; height: 20px; color: var(--color-fg-muted); flex-shrink: 0; }
.svly-srch__field input { width: 100%; border: 0; outline: none; background: transparent; font-family: var(--font-body); font-size: var(--t-base); color: var(--color-fg); }
.svly-srch__field input::placeholder { color: var(--color-fg-muted); }
.svly-srch__cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-5); }
.svly-srch__cat {
    font-size: var(--t-sm); font-weight: var(--fw-medium);
    color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-pill);
    padding: 0.35rem 0.85rem; text-decoration: none; transition: all var(--d-fast) var(--e-out);
}
.svly-srch__cat:hover, .svly-srch__cat.is-active { background: #fff; color: var(--color-primary); border-color: #fff; }
@media (max-width: 680px) {
    .svly-srch__form { grid-template-columns: 1fr; }
    .svly-srch__field + .svly-srch__field { border-left: 0; border-top: 1px solid var(--color-border); }
    .svly-srch__form .svly-btn { width: 100%; }
}

/* ---- Results --------------------------------------------------------------- */
.svly-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.svly-results__count { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-xl); color: var(--color-ink); }
.svly-results__count span { color: var(--color-fg-muted); font-weight: var(--fw-regular); font-size: var(--t-base); }
.svly-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 980px) { .svly-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svly-results__grid { grid-template-columns: 1fr; } }

.svly-prov {
    display: flex; flex-direction: column;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    overflow: hidden; transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.svly-prov:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.svly-prov__top { display: flex; gap: var(--s-4); padding: var(--s-5); }
.svly-prov__av {
    width: 60px; height: 60px; border-radius: var(--r-full); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-lg); color: #fff;
    background: linear-gradient(135deg, var(--c-indigo-500), var(--c-indigo-700));
}
.svly-prov:nth-child(3n+2) .svly-prov__av { background: linear-gradient(135deg, var(--c-coral-400), var(--c-coral-600)); }
.svly-prov:nth-child(3n+3) .svly-prov__av { background: linear-gradient(135deg, var(--c-teal-500), var(--c-teal-700)); }
.svly-prov__name { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-lg); color: var(--color-ink); }
.svly-prov__trade { font-size: var(--t-sm); color: var(--color-fg-secondary); }
.svly-prov__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; font-size: var(--t-sm); color: var(--color-fg-muted); }
.svly-prov__rating { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-ink); font-weight: var(--fw-semibold); }
.svly-prov__rating svg { width: 15px; height: 15px; color: var(--c-warning-500); }
.svly-prov__cats { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 var(--s-5) var(--s-2); }
.svly-prov__cats span { font-size: var(--t-xs); font-weight: var(--fw-semibold); color: var(--color-primary-active); background: var(--color-primary-soft); border-radius: var(--r-pill); padding: 0.2rem 0.6rem; }
.svly-prov__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--color-border); background: var(--color-surface-sunken); }
.svly-prov__price { font-size: var(--t-sm); color: var(--color-fg-secondary); }
.svly-prov__price b { font-family: var(--font-display); color: var(--color-ink); font-size: var(--t-lg); }

.svly-empty { text-align: center; padding: var(--s-16) var(--s-5); max-width: 520px; margin-inline: auto; }
.svly-empty__icon { width: 64px; height: 64px; border-radius: var(--r-full); background: var(--color-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-5); }
.svly-empty__icon svg { width: 30px; height: 30px; }
.svly-empty h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-2xl); color: var(--color-ink); margin: 0 0 var(--s-2); }
.svly-empty p { color: var(--color-fg-secondary); margin: 0 0 var(--s-6); }

/* ---- Provider profile ------------------------------------------------------ */
.svly-pf__cover { height: 160px; background: radial-gradient(120% 120% at 100% 0%, var(--c-teal-500) 0%, transparent 55%), linear-gradient(135deg, var(--c-indigo-500), var(--c-indigo-700)); }
.svly-pf__head { display: flex; gap: var(--s-6); margin-top: -48px; align-items: flex-end; flex-wrap: wrap; }
.svly-pf__av {
    width: 110px; height: 110px; border-radius: var(--r-full); border: 4px solid #fff; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
    font-weight: var(--fw-black); font-size: var(--t-4xl); color: #fff;
    background: linear-gradient(135deg, var(--c-indigo-500), var(--c-indigo-700)); box-shadow: var(--e-shadow-2);
}
.svly-pf__id { flex: 1; min-width: 240px; padding-bottom: var(--s-2); }
.svly-pf__name { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-3xl); color: var(--color-ink); margin: 0; }
.svly-pf__trade { color: var(--color-fg-secondary); font-size: var(--t-lg); margin-top: 0.2rem; }
.svly-pf__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--t-sm); color: var(--color-fg-muted); }
.svly-pf__meta .rt { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-ink); font-weight: var(--fw-semibold); }
.svly-pf__meta .rt svg { width: 16px; height: 16px; color: var(--c-warning-500); }
.svly-pf__actions { display: flex; gap: var(--s-3); padding-bottom: var(--s-2); flex-wrap: wrap; }
.svly-pf__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-8); margin-top: var(--s-10); }
@media (max-width: 860px) { .svly-pf__grid { grid-template-columns: 1fr; } }
.svly-pf__card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--s-6); box-shadow: var(--card-shadow); }
.svly-pf__card h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-xl); color: var(--color-ink); margin: 0 0 var(--s-4); }
.svly-pf__svc { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) 0; border-bottom: 1px solid var(--color-border); }
.svly-pf__svc:last-child { border-bottom: 0; }
.svly-pf__svc .nm { font-weight: var(--fw-semibold); color: var(--color-ink); }
.svly-pf__svc .pr { font-family: var(--font-display); color: var(--color-ink); }
.svly-pf__svc .pr small { color: var(--color-fg-muted); font-family: var(--font-body); font-weight: var(--fw-regular); }
.svly-pf__areas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svly-pf__areas span { font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--color-fg-secondary); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; }
.svly-pf__trust { display: flex; flex-direction: column; gap: var(--s-3); }
.svly-pf__trust div { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); color: var(--color-fg-secondary); }
.svly-pf__trust svg { width: 18px; height: 18px; color: var(--color-trust); flex-shrink: 0; }

/* ---- Smart-search type-ahead ---------------------------------------------- */
.svly-srch__field { position: relative; }
.svly-ac {
    position: absolute; top: calc(100% + 8px); left: -8px; right: -8px; z-index: 60;
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--r-lg);
    box-shadow: var(--e-shadow-4); padding: 0.35rem; display: none; max-height: 320px; overflow: auto;
}
.svly-ac.is-open { display: block; }
.svly-ac__item {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem;
    border-radius: var(--r-md); cursor: pointer; color: var(--color-fg); font-size: var(--t-sm);
}
.svly-ac__item svg { color: var(--color-fg-muted); flex-shrink: 0; }
.svly-ac__item span { flex: 1; color: var(--color-ink); }
.svly-ac__item em { font-style: normal; font-size: var(--t-xs); color: var(--color-primary); background: var(--color-primary-soft); padding: 0.1rem 0.4rem; border-radius: var(--r-pill); }
.svly-ac__item:hover, .svly-ac__item.is-active { background: var(--color-surface-sunken); }

/* "we understood your search" note */
.svly-srch__interpreted { margin-top: var(--s-4); font-size: var(--t-sm); color: rgba(255,255,255,0.85); }
.svly-srch__interpreted b { color: #fff; }
.svly-srch__interpreted .pill { display:inline-block; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.2); border-radius:var(--r-pill); padding:.15rem .6rem; margin-left:.25rem; font-weight:var(--fw-semibold); }