/* ═══════════════════════════════════════════════════════════════
   PC WEB APP OVERHAUL, part 7: provider profile as a page
   (Ren 2026-11-06). Desktop only (body.dx); phone unchanged.
   The same profile (#profileViewOverlay .ccpv, people.css) is laid
   out under the green header: a green cover, the person on the left
   with the numbers in a row, tabs in the main column, and Message /
   Hire with the safety note on the right. Hook: deskx7.js.
   ═══════════════════════════════════════════════════════════════ */
body.dx #profileViewOverlay:has(.ccpv) {
  position: fixed !important; inset: var(--dx6-top, 184px) 0 0 0 !important; background: var(--dx-bg) !important;
  backdrop-filter: none !important; align-items: flex-start !important; justify-content: center !important;
  overflow-y: auto !important; padding: 0 !important; z-index: 10002 !important;
}
body.dx #profileViewOverlay .modal-container.ccpv {
  max-width: 1200px !important; width: 100% !important; height: auto !important; max-height: none !important;
  border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 18px; row-gap: 14px; align-items: start;
  padding: 16px 24px 40px !important; box-sizing: border-box; transform: none !important; animation: none !important;
}
body.dx #profileViewOverlay .ccpv-scroll { display: contents !important; }
body.dx #profileViewOverlay .ccpv-top { grid-column: 1 / -1; grid-row: 1; height: auto; padding: 0; justify-content: flex-start; gap: 10px; }
body.dx #profileViewOverlay .ccpv-top b { font-size: 14px; color: var(--dx-mut); font-weight: 600; }
body.dx #profileViewOverlay .ccpv-top .ccpv-x { width: 36px; height: 36px; border: 1px solid var(--dx-line); background: var(--dx-card); }
body.dx #profileViewOverlay .ccpv-top-sp { display: none; }

/* hero: cover + person on the left, numbers in a row */
body.dx #profileViewOverlay .ccpv-hero {
  grid-column: 1 / -1; grid-row: 2; position: relative; overflow: hidden;
  display: grid !important; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-rows: 150px auto auto auto; column-gap: 20px; row-gap: 4px;
  align-items: start; text-align: left; padding: 0 28px 24px !important; border-radius: 14px !important;
  background: var(--dx-card) !important; border: 1px solid var(--dx-line);
}
body.dx #profileViewOverlay .ccpv-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(120deg, #0f3d22, #1E7A33 60%, #2ea84a); }
body.dx #profileViewOverlay .ccpv-av-wrap { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin-top: 80px; position: relative; z-index: 1; }
body.dx #profileViewOverlay .pv-avatar-lg.ccpv-av { width: 140px !important; height: 140px !important; font-size: 48px !important; border: 5px solid var(--dx-card) !important; box-sizing: border-box; }
body.dx #profileViewOverlay .ccpv-dot { width: 22px; height: 22px; right: 10px; bottom: 10px; border-width: 4px; }
body.dx #profileViewOverlay .ccpv .pv-name { grid-column: 2; grid-row: 2; margin: 14px 0 0; font: 800 28px Outfit, Inter, sans-serif !important; letter-spacing: -.4px; position: relative; z-index: 1; }
body.dx #profileViewOverlay .ccpv .pv-skill { grid-column: 2; grid-row: 3; font-size: 14.5px; }
body.dx #profileViewOverlay .ccpv-badges { grid-column: 3; grid-row: 2; justify-content: flex-end; align-self: center; margin-top: 14px; }
body.dx #profileViewOverlay .ccpv-stats { grid-column: 2 / -1; grid-row: 4; display: flex !important; gap: 10px; margin-top: 12px; align-self: start; }
body.dx #profileViewOverlay .ccpv-stat { flex: 0 0 auto; min-width: 140px; align-items: flex-start; padding: 12px 16px; }
body.dx #profileViewOverlay .ccpv-stat b { font-size: 20px; }

/* main column: tabs + panels */
body.dx #profileViewOverlay .ccpv-tabs { grid-column: 1; grid-row: 3; justify-content: flex-start; gap: 8px; }
body.dx #profileViewOverlay .ccpv-tabs .provider-view-tab-btn { flex: 0 0 auto !important; padding: 0 22px !important; cursor: pointer; }
body.dx #profileViewOverlay .provider-view-tab-panel { grid-column: 1; grid-row: 4; min-width: 0; }
body.dx #profileViewOverlay .provider-view-tab-panel .ccpv-card { border: 1px solid var(--dx-line); }

/* right column: hire card + safety */
body.dx #profileViewOverlay .ccpv-foot {
  grid-column: 2; grid-row: 3 / span 2; position: sticky !important; top: 16px; align-self: start;
  display: flex !important; flex-direction: column-reverse !important; gap: 10px; padding: 20px !important;
  background: var(--dx-card) !important; border: 1px solid var(--dx-line); border-radius: 14px !important; box-shadow: none !important;
}
body.dx #profileViewOverlay .ccpv-foot::after { content: "Ask for a quote"; order: 9; font: 800 17px Inter, sans-serif; color: var(--dx-ink); margin-bottom: 2px; align-self: flex-start; }
body.dx #profileViewOverlay .ccpv-foot > button { width: 100% !important; flex: none !important; cursor: pointer; }
body.dx #profileViewOverlay .ccpv-safety { grid-column: 2; grid-row: 5; justify-content: flex-start; }
@media (max-width: 1180px) {
  body.dx #profileViewOverlay .modal-container.ccpv { grid-template-columns: minmax(0, 1fr) 300px; }
}