/* HalalVerified Marketplace 1.0.0 */
.hvm { --m-dark: var(--hv-dark, #0b4d2c); --m-acc: var(--hv-accent, #f2a516); --m-ink: var(--hv-ink, #16201a); --m-muted: var(--hv-muted, #56635a); --m-line: var(--hv-line, #dce6df); --m-mist: #e4efe7; color: var(--m-ink); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.hvm-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.hvm-note { margin: 0; padding: .85rem 1rem; border-radius: 12px; background: var(--m-mist); }
.hvm-note--ok { background: #e3f4e8; color: #134d2a; } .hvm-note--err { background: #fde8e6; color: #8a1c13; }
.hvm-muted { color: var(--m-muted); }
.hvm-badge { display: inline-flex; min-width: 1.4em; height: 1.4em; padding: 0 .35em; border-radius: 99px; background: #b3261e; color: #fff; font-size: .75rem; font-weight: 700; align-items: center; justify-content: center; }
.hvm-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.hvm-top__mine { font-weight: 600; }
.hvm-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: .5rem; }
.hvm-tabs a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .25rem 0; text-decoration: none; color: var(--m-ink); font-size: .85rem; font-weight: 600; text-align: center; }
.hvm-tabs__ico { width: 52px; height: 52px; border-radius: 16px; background: var(--m-mist); color: var(--m-dark); display: flex; align-items: center; justify-content: center; }
.hvm-tabs a[aria-current] .hvm-tabs__ico { background: var(--m-dark); color: #fff; }
.hvm-tabs a[aria-current] { color: var(--m-dark); }
.hvm-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.hvm-filter input { flex: 1 1 160px; min-width: 0; font: inherit; padding: .7rem .85rem; border: 1px solid #c9d8ce; border-radius: 12px; background: #fff; }
.hvm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: .75rem; }
.hvm-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--m-line); text-decoration: none; color: var(--m-ink); }
.hvm-card:hover { border-color: var(--m-dark); }
.hvm-card__img { position: relative; aspect-ratio: 4 / 3; background: var(--m-mist); display: flex; align-items: center; justify-content: center; color: var(--m-dark); }
.hvm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvm-card__img .hvm-ico { width: 40px; height: 40px; opacity: .6; }
.hvm-card__flag { position: absolute; left: 8px; top: 8px; padding: .2rem .55rem; border-radius: 99px; background: var(--m-ink); color: #fff; font-size: .75rem; font-weight: 600; }
.hvm-card__body { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .8rem .8rem; }
.hvm-card__price { font-size: 1.05rem; } .hvm-card--free .hvm-card__price { color: #17703a; } .hvm-card--lend .hvm-card__price { color: #0f5e63; }
.hvm-card__title { font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hvm-card__meta { font-size: .78rem; color: var(--m-muted); }
.hvm-empty { padding: 2rem 1rem; text-align: center; border: 1px dashed #c9d8ce; border-radius: 16px; }
.hvm-safety { font-size: .85rem; color: var(--m-muted); margin: 0; }
.hvm-form { display: grid; gap: 1rem; max-width: 680px; padding: 1.25rem; border: 1px solid var(--m-line); border-radius: 16px; background: #fff; }
.hvm-field { margin: 0; border: 0; padding: 0; min-width: 0; }
.hvm-field[hidden] { display: none; }
.hvm-field > label, .hvm-field legend, .hvm-label { display: block; font-weight: 600; margin: 0 0 .4rem; padding: 0; }
.hvm-field input[type=text], .hvm-field input[type=number], .hvm-field input[type=date], .hvm-field textarea, .hvm-field select, .hvm-msgform textarea, .hvm-rate input[type=text] { width: 100%; box-sizing: border-box; font: inherit; padding: .7rem .8rem; border: 1px solid #c9d8ce; border-radius: 12px; background: #fff; }
.hvm-field small { display: block; margin-top: .3rem; color: var(--m-muted); font-size: .8rem; }
.hvm-opt { font-weight: 400; color: var(--m-muted); }
.hvm-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem 1rem; }
.hvm-typepick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.hvm-typepick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hvm-typepick span { display: flex; align-items: center; gap: .6rem; padding: .8rem; border: 2px solid #c9d8ce; border-radius: 12px; font-weight: 600; cursor: pointer; color: var(--m-ink); }
.hvm-typepick .hvm-ico { color: var(--m-dark); }
.hvm-typepick input:checked + span { border-color: var(--m-dark); background: var(--m-mist); }
.hvm-typepick input:focus-visible + span { outline: 2px solid var(--m-dark); outline-offset: 2px; }
.hvm-typepick__link { text-decoration: none; }
.hvm-up { display: flex; flex-wrap: wrap; gap: .5rem; }
.hvm-up__list { display: contents; }
.hvm-up__add, .hvm-thumb { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; }
.hvm-up__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed #9db5a6; color: var(--m-dark); font-size: .75rem; font-weight: 600; cursor: pointer; text-align: center; }
.hvm-up__add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hvm-up__add:focus-within { outline: 2px solid var(--m-dark); outline-offset: 2px; }
.hvm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hvm-thumb > span { position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .3rem; background: rgba(22, 32, 26, .8); color: #fff; font-size: .7rem; }
.hvm-check label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.hvm-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; } .hvm-submit small { color: var(--m-muted); flex: 1 1 220px; }
.hvm-gallery { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; }
.hvm-gallery a { flex: 0 0 min(100%, 520px); scroll-snap-align: start; }
.hvm-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; background: var(--m-mist); }
.hvm-item__type { margin: 0; font-size: .85rem; font-weight: 600; color: var(--m-dark); } .hvm-item__type--lend { color: #0f5e63; } .hvm-item__type--free { color: #17703a; }
.hvm-item__price { margin: 0; font-family: var(--hv-head, inherit); font-size: 1.9rem; font-weight: 800; color: var(--m-dark); }
.hvm-item__meta { margin: 0; color: var(--m-muted); font-size: .9rem; }
.hvm-item__desc { line-height: 1.6; }
.hvm-seller { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--m-line); border-radius: 14px; background: #fff; }
.hvm-seller small { display: block; color: var(--m-muted); }
.hvm-avatar { width: 44px; height: 44px; border-radius: 50%; background: #0f5e63; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.hvm-borrow, .hvm-msgform, .hvm-owner, .hvm-box, .hvm-chat { padding: 1.1rem 1.25rem; border: 1px solid var(--m-line); border-radius: 16px; background: #fff; display: grid; gap: .75rem; }
.hvm-borrow__title, .hvm-owner__title { margin: 0; font-weight: 700; }
.hvm-steps { margin: 0; padding-left: 1.2rem; color: var(--m-muted); font-size: .9rem; }
.hvm-msgform label { font-weight: 600; }
.hvm-msgform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; } .hvm-msgform__foot small { color: var(--m-muted); flex: 1 1 220px; }
.hvm-owner__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hvm-inline { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.hvm-inline select { font: inherit; padding: .4rem .5rem; border: 1px solid #c9d8ce; border-radius: 8px; max-width: 100%; }
.hvm-owner__note { margin: 0; font-size: .9rem; }
.hvm-report summary { cursor: pointer; color: var(--m-muted); font-size: .9rem; }
.hvm-report form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.hvm-report select { font: inherit; padding: .45rem .5rem; border: 1px solid #c9d8ce; border-radius: 8px; }
.hvm-back { margin: 0; }
.hvm-box h2, .hvm-chat h2 { margin: 0; font-size: 1.15rem; }
.hvm-box__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.hvm-chat h2 small { display: block; font-size: .85rem; font-weight: 400; }
.hvm-chat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; max-height: 420px; overflow-y: auto; }
.hvm-chat__list li { max-width: 80%; padding: .6rem .8rem; border-radius: 14px; background: #f1f5f2; }
.hvm-chat__list li.is-me { align-self: flex-end; background: var(--m-dark); color: #fff; }
.hvm-chat__list p { margin: 0; } .hvm-chat__list time { display: block; font-size: .7rem; opacity: .75; margin-top: .2rem; }
.hvm-inbox, .hvm-mylist, .hvm-loans { list-style: none; margin: 0; padding: 0; }
.hvm-inbox a { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0 .6rem; padding: .7rem 0; border-bottom: 1px solid var(--m-line); text-decoration: none; color: var(--m-ink); }
.hvm-inbox a span { color: var(--m-muted); font-size: .85rem; } .hvm-inbox small { grid-column: 1 / 3; color: var(--m-muted); } .hvm-inbox .hvm-badge { grid-row: 1 / 3; grid-column: 3; align-self: center; }
.hvm-inbox .is-unread strong { color: var(--m-dark); }
.hvm-mylist a { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--m-line); text-decoration: none; color: var(--m-ink); }
.hvm-mylist img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.hvm-mylist small { display: block; color: var(--m-muted); }
.hvm-loans li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding: .75rem 0; border-bottom: 1px solid var(--m-line); }
.hvm-loans small { display: block; color: var(--m-muted); }
.hvm-loans__act { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.hvm-pill { display: inline-block; margin-top: .3rem; padding: .15rem .55rem; border-radius: 99px; background: #f1f5f2; font-size: .75rem; font-weight: 600; }
.hvm-pill--requested { background: #fff4dc; color: #8a5a00; } .hvm-pill--accepted, .hvm-pill--out { background: #e3f4e8; color: #134d2a; }
.hvm-link { font-size: .9rem; font-weight: 600; }
.hvm-rate { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--m-line); }
.hvm-rate fieldset { border: 0; margin: 0; padding: 0; flex-basis: 100%; } .hvm-rate legend { font-weight: 600; padding: 0; }
.hvm-rate input[type=text] { flex: 1 1 220px; width: auto; }
.hvm-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.hvm-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hvm-stars label { font-size: 1.9rem; line-height: 1; color: #d4ddd7; cursor: pointer; padding: 0 2px; }
.hvm-stars input:checked ~ label, .hvm-stars label:hover, .hvm-stars label:hover ~ label { color: var(--m-acc); }
.hvm-stars input:focus-visible + label { outline: 2px solid var(--m-dark); border-radius: 4px; }
.hvm .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }