/* Afodabo v15 — Huduma (Nearby Service Request). Prefix .hd- (inatumia pia .rq- za demand.css). */
.hd-hero { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #0ea5e9 55%, transparent), transparent 55%), linear-gradient(135deg, #78350f, #b45309 45%, var(--primary)); }

.hd-card .hd-thumb { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; flex: 0 0 46px; background: var(--field); }
.hd-price { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.hd-price small { font-weight: 500; font-size: .74rem; color: var(--muted); }
.hd-stars { color: #f59e0b; font-size: .82rem; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.hd-stars small { color: var(--muted); }
.hd-stars.big { font-size: 1.25rem; gap: 4px; }

/* Aina za huduma (radio chips) */
.hd-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.hd-cats label { position: relative; cursor: pointer; min-width: 0; }
.hd-cats input { position: absolute; opacity: 0; pointer-events: none; }
.hd-cats span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 600; line-height: 1.2; transition: border-color .12s, background .12s; }
.hd-cats span i { color: var(--c); font-size: 1.05rem; flex: 0 0 auto; }
.hd-cats input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.hd-cats input:focus-visible + span { outline: 2px solid var(--c); outline-offset: 2px; }

/* Hatua za kazi */
.hd-steps { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; counter-reset: s; }
.hd-steps li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .68rem; color: var(--muted); text-align: center; position: relative; min-width: 0; }
.hd-steps li i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--field); font-size: .9rem; position: relative; z-index: 1; }
.hd-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.hd-steps li:first-child::before { display: none; }
.hd-steps li.on { color: var(--text); font-weight: 600; }
.hd-steps li.on i { background: var(--primary); color: #fff; }
.hd-steps li.on::before { background: var(--primary); }
.hd-steps span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }

.hd-job { border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.hd-party { gap: 10px; margin: 6px 0 2px; }
.hd-more { margin-top: 12px; }
.hd-more summary { cursor: pointer; color: var(--muted); list-style: none; }
.hd-more summary::-webkit-details-marker { display: none; }

.hd-accept { display: inline-block; }
.hd-accept summary { list-style: none; }
.hd-accept summary::-webkit-details-marker { display: none; }
.hd-accept[open] { display: block; flex-basis: 100%; order: 9; }
.hd-accept[open] summary { margin-bottom: 8px; }
.hd-accept-f { padding: 12px; border-radius: 14px; background: var(--field); }

.hd-to { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.hd-review { padding: 12px 16px; border-top: 1px solid var(--line); }
.hd-review:first-of-type { border-top: 0; }
.hd-review .row { gap: 8px; }
.hd-review p { margin: 6px 0 0; }

.hd-rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin: 4px 0 10px; }
.hd-rate input { position: absolute; opacity: 0; pointer-events: none; }
.hd-rate label { font-size: 1.7rem; color: var(--line); cursor: pointer; line-height: 1; }
.hd-rate input:checked ~ label, .hd-rate label:hover, .hd-rate label:hover ~ label { color: #f59e0b; }
.hd-rate input:focus-visible + label { outline: 2px solid #f59e0b; border-radius: 6px; }

/* Ujumbe wa aina "service" kwenye Messages */
body.app .msg.service .ot i { color: #2563eb; }

@media (max-width: 560px) {
    .hd-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hd-steps li { font-size: .6rem; }
    .hd-steps li i { width: 26px; height: 26px; font-size: .8rem; }
    .hd-steps li::before { top: 13px; }
}
.hd .rq-o-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd .rq-o-nums div { min-width: 0; }
.hd .rq-o-nums b { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.rq-cta .btn i { font-size: 1em; color: inherit; }