/* Shared listing profile styles (public profile + dashboard preview). Tokens inlined so the public page needs no dashboard CSS. */
:root { --hg-navy: #0b2e4e; --hg-blue: #1277e1; }
.pp-wrap { margin: 0; }
.pp-banner { padding: 14px clamp(16px,4vw,34px); border-bottom: 1px solid #f0e2c8; background: #fff4e5; }
.pp-banner-inner { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-banner-inner > i { color: #b06d10; font-size: 16px; }
.pp-banner-copy { flex: 1; min-width: 200px; }
.pp-banner-copy > strong { display: block; color: #7a4c0c; font-size: 13.5px; font-weight: 800; }
.pp-banner-copy small strong { font-weight: 700; }
.pp-banner-copy small { display: block; margin-top: 2px; color: #8a6520; font-size: 12.5px; }
.pp-banner-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pp-btn-edit { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e0cfae; border-radius: 9px; background: #fff; color: #7a4c0c; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pp-btn-submit { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; background: var(--hg-blue); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pp-btn-submit:hover { background: #0f63bd; color: #fff; }
.pp-hero { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(18,119,225,.3) 0%, rgba(11,46,78,0) 62%),
    linear-gradient(rgba(120,160,220,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,220,.06) 1px, transparent 1px),
    var(--hg-navy);
  background-size: auto, 32px 32px, 32px 32px, auto; }
.pp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 0%, rgba(18,119,225,.30) 0%, rgba(11,46,78,0) 62%); pointer-events: none; }
.pp-hero-inner { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: 38px clamp(16px,4vw,28px) 48px; text-align: center; }
.pp-hero-logo { width: 78px; height: 78px; margin: 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 19px; background: rgba(255,255,255,.10); color: #fff; font-size: 29px; font-weight: 800; }
.pp-hero-rating { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pp-hero-rating .stars, .pp-wrap .pp-hero-rating .stars i { font-size: 15px; letter-spacing: 2px; color: #f5a623; }
.pp-hero-rating .stars .dim, .pp-wrap .pp-hero-rating .stars i.dim { color: rgba(255,255,255,.28); }
.pp-hero-rating b { color: #fff; font-size: 15px; font-weight: 800; }
.pp-hero-rating span { color: #a9c2da; font-size: 14px; }
.pp-hero h1 { margin: 14px 0 0; font-size: clamp(28px,5vw,42px); font-weight: 800; letter-spacing: -.025em; line-height: 1.06; color: #fff; text-wrap: balance; }
.pp-hero-addr { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #cfe0ef; font-size: 14px; }
.pp-hero-addr i { color: #8fb4d6; font-size: 13px; }
.pp-hero-ctas { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pp-hero-chip { height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; font-size: 15px; font-weight: 700; }
.pp-hero-cta { height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; background: var(--hg-blue); color: #fff; font-size: 15px; font-weight: 700; }
.pp-hero-cta:hover { background: #0f63bd; color: #fff; }
.pp-hero-site { margin-top: 16px; display: block; color: #a9c2da; font-size: 13.5px; }
.pp-hero-social { margin-top: 18px; display: flex; justify-content: center; gap: 10px; }
.pp-hero-social a { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #cfe0ef; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pp-hero-social a:hover { background: rgba(255,255,255,.14); color: #fff; }
/* Remote Hail Inspections feature band (shown only when the contractor enables it) */
.pp-rhi-band { padding: 15px clamp(16px,4vw,28px); border-top: 1px solid rgba(255,255,255,.08); background: #0e355c; }
.pp-rhi-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: center; column-gap: 11px; row-gap: 6px; flex-wrap: wrap; text-align: center; }
.pp-rhi-inner > i { color: #6fb3ff; font-size: 17px; }
.pp-rhi-inner strong { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.pp-rhi-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #2fae70; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pp-rhi-text { color: #a9c2da; font-size: 13px; line-height: 1.5; }
@media (min-width: 701px) { .pp-rhi-text::before { content: "·"; margin-right: 11px; color: #3d5d80; } }
.pp-tags-band { border-bottom: 1px solid #e2ecf7; background: #f2f7fc; }
.pp-tags-inner { max-width: 900px; margin: 0 auto; padding: 26px clamp(16px,4vw,28px); text-align: center; }
.pp-tags-inner > span { display: block; margin-bottom: 15px; color: #5a7fa3; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pp-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid #d3e0ee; border-radius: 8px; background: #fff; color: var(--hg-navy); font-size: 13px; font-weight: 700; }
.pp-tags i { color: var(--hg-blue); font-size: 11px; }
.pp-body { padding: 32px 0 64px; }
.pp-body-inner { max-width: 820px; margin: 0 auto; padding: 0 clamp(16px,4vw,28px); }
.pp-card { margin-top: 20px; padding: 28px 30px; border: 1px solid #e8eef5; border-radius: 16px; background: #fff; }
.pp-card.first { margin-top: 0; }
.pp-card.hail { border-color: #d7e7fa; background: #f7fbff; }
.pp-kicker { display: block; margin-bottom: 6px; color: var(--hg-blue); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pp-card h2 { margin: 0 0 20px; color: var(--hg-navy); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.pp-icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #eaf2fd; color: var(--hg-blue); font-size: 18px; }
.pp-row { display: flex; gap: 16px; }
.pp-row p { margin: 0 0 10px; color: #3a4453; font-size: 14.5px; line-height: 1.65; }
.pp-row p:last-child { margin-bottom: 0; }
.pp-grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.pp-detail { display: flex; align-items: flex-start; gap: 12px; }
.pp-detail > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #f2f6fb; color: #5a7fa3; font-size: 15px; }
.pp-detail small { display: block; color: #8a929c; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pp-detail strong { display: block; margin-top: 2px; color: #1a1a22; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.pp-svc { padding: 9px 0; display: flex; align-items: flex-start; gap: 10px; }
.pp-svc i { margin-top: 3px; color: #1f9d57; font-size: 14px; }
.pp-svc strong { display: block; color: #1a1a22; font-size: 14.5px; font-weight: 700; }
.pp-rating-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.pp-rating-tile { flex: 1; min-width: 150px; padding: 18px 20px; border: 1px solid #e6eef7; border-radius: 13px; background: #f7fafd; }
.pp-rating-tile .big { color: var(--hg-navy); font-size: 30px; font-weight: 800; line-height: 1; }
.pp-rating-tile .stars, .pp-wrap .pp-rating-tile .stars i { margin-top: 0; color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.pp-rating-tile .stars { margin-top: 8px; }
.pp-rating-tile .stars .dim, .pp-wrap .pp-rating-tile .stars i.dim { color: #d8dee6; }
.pp-rating-tile .pp-tile-date { margin-top: 8px; color: #3a4453; font-size: 13px; font-weight: 600; }
.pp-rating-tile small { display: block; margin-top: 8px; color: #8a929c; font-size: 12.5px; }
.pp-rating-list { margin-top: 12px; }
.pp-rating-head, .pp-rating-row { display: grid; grid-template-columns: 1fr auto 56px; align-items: center; gap: 12px; padding: 12px 0; }
.pp-rating-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8a929c; }
.pp-rating-row { border-top: 1px solid #eef0f4; font-size: 14px; }
.pp-rating-row strong { color: #1a1a22; font-weight: 700; }
.pp-rr-rate { display: flex; align-items: center; gap: 7px; justify-self: end; }
.pp-rr-rate .stars { display: inline-flex; }
.pp-rr-rate .stars, .pp-wrap .pp-rr-rate .stars i { font-size: 13px; width: auto; letter-spacing: 1px; color: #f5a623; }
.pp-wrap .pp-rr-rate .stars i { width: 14px; text-align: center; letter-spacing: 0; }
.pp-rr-rate .stars .dim, .pp-wrap .pp-rr-rate .stars i.dim { color: #d8dee6; }
.pp-rr-rate b { min-width: 30px; text-align: right; font-size: 13.5px; color: #1a1a22; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-rr-rate b.muted { color: #8a929c; font-weight: 600; }
.pp-rating-row a { justify-self: end; font-size: 13px; font-weight: 700; color: #1277e1; }
.pp-rating-row .pp-read-off { justify-self: end; font-size: 13px; font-weight: 700; color: #d8dee6; cursor: default; }
.pp-hour-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; }
.pp-hour-row:nth-child(odd) { background: #fafbfd; }
.pp-hour-row + .pp-hour-row { border-top: 1px solid #f2f4f7; }
.pp-hour-row span:first-child { font-size: 13.5px; font-weight: 700; color: var(--hg-navy); }
.pp-hour-row span:last-child { font-size: 13.5px; color: #3a4453; font-variant-numeric: tabular-nums; }
.pp-cred { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid #eef0f4; }
.pp-cred:first-of-type { border-top: 0; padding-top: 0; }
.pp-cred > span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #eaf2fd; color: var(--hg-blue); font-size: 16px; }
.pp-cred small { display: block; margin-bottom: 9px; color: #8a929c; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pp-cred-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-cred-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #dbe9fa; border-radius: 8px; background: #eef4fc; color: var(--hg-blue); font-size: 12.5px; font-weight: 700; }
.pp-video-empty { padding: 40px 24px; border: 1.5px dashed #d3ddea; border-radius: 12px; text-align: center; }
.pp-video-empty strong { display: block; color: #5c6675; font-size: 13.5px; font-weight: 800; }
.pp-video-empty small { display: block; margin-top: 4px; color: #8a97a6; font-size: 12px; }
.pp-highlight { display: flex; gap: 12px; }
.pp-highlight > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #eaf2fd; color: var(--hg-blue); font-size: 15px; }
.pp-highlight strong { display: block; color: var(--hg-navy); font-size: 14.5px; }
.pp-highlight p { margin: 3px 0 0; color: #6e7a8a; font-size: 13px; line-height: 1.5; }
.pp-highlights { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pp-contact-wide { width: 100%; height: 50px; margin-top: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; background: var(--hg-blue); color: #fff; font-size: 15px; font-weight: 700; }
.pp-contact-wide:hover { background: #0f63bd; color: #fff; }
.pp-final-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) { .pp-grid2 { grid-template-columns: 1fr; } }

/* Admin-only controls layered around the exact customer listing preview. */
/* Full-bleed like the customer dashboard preview: the ops content gutter is removed for this page. */
.ops-content:has(.pp-admin-preview) { max-width: none; margin: 0; padding: 0; background: #fff; }
.pp-admin-preview .pp-banner { position: sticky; top: 66px; z-index: 19; box-shadow: 0 2px 8px rgba(11,46,78,.06); }
.pp-admin-preview .pp-admin-lifecycle { position: static; box-shadow: none; }
.pp-admin-preview .pp-banner-inner { max-width: 1040px; }
.pp-admin-preview .pp-banner-actions { align-items: center; }
.pp-admin-preview .pp-admin-lifecycle { border-color: #dfe6ee; background: #f7f9fc; }
.pp-admin-preview .pp-admin-lifecycle .pp-banner-inner > i { color: #5a6472; }
.pp-admin-preview .pp-admin-lifecycle .pp-banner-copy > strong { color: #29384a; }
.pp-admin-preview .pp-admin-lifecycle .pp-banner-copy small { color: #687588; }
.pp-admin-preview .pp-admin-reason { min-width: 220px; min-height: 40px; padding: 9px 12px; border: 1px solid #cfd8e3; border-radius: 8px; background: #fff; color: #29384a; font: inherit; font-size: 13px; }
.pp-admin-preview .pp-admin-reason:focus { outline: 3px solid rgba(18,119,225,.13); border-color: var(--hg-blue); }
.ops-content .pp-admin-preview .pp-btn-edit { min-height: 40px; padding: 0 16px; border: 1px solid #cfd8e3; border-radius: 9px; background: #fff; color: #29384a; font-size: 13px; font-weight: 700; }
.ops-content .pp-admin-preview .pp-btn-edit:hover { border-color: #aac2dc; background: #f5f8fc; color: var(--hg-blue); }

@media (max-width: 700px) {
  .pp-admin-preview .pp-banner { padding: 14px 16px; }
  .pp-admin-preview .pp-banner-inner { align-items: flex-start; }
  .pp-admin-preview .pp-banner-inner > i { margin-top: 3px; }
  .pp-admin-preview .pp-banner-actions { width: 100%; margin-left: 30px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pp-admin-preview .pp-banner-actions .pp-btn-edit { width: 100%; justify-content: center; }
  .pp-admin-preview form.pp-banner-actions { grid-template-columns: minmax(0,1fr) auto; }
  .pp-admin-preview .pp-admin-reason { width: 100%; min-width: 0; }
}

@media (max-width: 460px) {
  .pp-admin-preview .pp-banner-actions { margin-left: 0; grid-template-columns: 1fr; }
  .pp-admin-preview form.pp-banner-actions { grid-template-columns: 1fr; }
}


.pp-public-crumb { padding: 14px clamp(16px,4vw,34px); background: #0b2e4e; color: #5a7fa3; font-size: 11.5px; font-weight: 500; }
.pp-public-crumb a { color: #8fb3d6; }
.pp-public-crumb a:hover { color: #fff; }
.pp-public-crumb span:last-child { color: #cfe0f2; }