/* Pro Operator Network - completed project proof.
   Shared by the Completed tab on active-jobs.php and the Completed Projects
   section on an operator profile. Every rule is scoped to a pon-done- class or
   to #ponDonePanel, so nothing here can reach tp-btn, tp-btn-primary,
   tp-btn-secondary, .job-card, .tab-btn or any other shared component.
   Mobile first. Hover only inside @media (hover: hover). */

#ponDonePanel[hidden] { display: none !important; }

.pon-done-intro { margin: 0 0 20px; }
.pon-done-intro h2 {
  font-family: "Barlow Condensed", Barlow, system-ui, Arial, sans-serif;
  font-size: 26px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: #ffd000; margin: 0 0 8px;
}
.pon-done-intro p { margin: 0; color: #9aa3ad; font-size: 15px; line-height: 1.55; }

.pon-done-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.pon-done-card {
  background: #121419;
  border: 1px solid #23262e;
  border-radius: 12px;
  padding: 18px 16px;
  min-width: 0;
}
.pon-done-card h3 {
  font-family: "Barlow Condensed", Barlow, system-ui, Arial, sans-serif;
  font-size: 21px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: #fff; margin: 0 0 6px;
}

.pon-done-badge {
  display: inline-block;
  font-family: "Barlow Condensed", Barlow, system-ui, Arial, sans-serif;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: #ffd000; background: rgba(255,208,0,.10);
  border: 1px solid rgba(255,208,0,.45);
  border-radius: 999px; padding: 4px 10px; margin: 0 0 12px;
}

.pon-done-meta  { margin: 0 0 6px; color: #9aa3ad; font-size: 14px; }
.pon-done-op    { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 600; }
.pon-done-stars { margin: 0 0 10px; color: #ffd000; font-size: 18px; letter-spacing: 2px; }

.pon-done-review {
  margin: 0 0 12px; padding: 12px 14px;
  border-left: 3px solid #ffd000; background: #0d0f13;
  color: #e5e7eb; font-size: 15px; line-height: 1.6;
  overflow-wrap: anywhere;
}

.pon-done-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pon-done-photos img {
  width: 104px; height: 78px; object-fit: cover;
  border-radius: 8px; border: 1px solid #23262e; display: block;
}

.pon-done-empty {
  background: #121419; border: 1px solid #23262e; border-radius: 12px;
  padding: 24px 18px; color: #9aa3ad;
}
.pon-done-empty h3 {
  font-family: "Barlow Condensed", Barlow, system-ui, Arial, sans-serif;
  font-size: 20px; text-transform: uppercase; color: #fff; margin: 0 0 8px;
}

@media (hover: hover) {
  .pon-done-card:hover { border-color: #33373f; }
}

@media (min-width: 760px) {
  .pon-done-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pon-done-card { padding: 22px 20px; }
}