/* ============================================================================
   BizzedIn — company profile (Phase 1 / P1.0)
   Loaded ONLY on bizzedin.com + bizzedin.storeboard.com (host-gated include).
   Everything is scoped under .bzp so it cannot leak onto storeboard/AYS/.life.
   Palette matches the BizzedIn wordmark: navy #12496B + brass #A9721C.
   ========================================================================== */
.bzp{
  --bzp-navy:#12496B; --bzp-navy-deep:#0C3550; --bzp-brass:#A9721C;
  --bzp-ink:#14222E; --bzp-soft:#48596A; --bzp-faint:#7C8A97;
  --bzp-paper:#EDF1F5; --bzp-card:#FFFFFF; --bzp-border:#DCE3EB; --bzp-border-2:#E8EDF2;
  --bzp-tint:#E3EEF5; --bzp-brass-tint:#F4E9D2; --bzp-ok:#2F7358;
  --bzp-shadow:0 1px 2px rgba(16,40,60,.05), 0 10px 28px -16px rgba(16,40,60,.22);
  font-family:'ProximaNova Regular','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--bzp-ink);
}
.bzp *{box-sizing:border-box}

/* ---- top card: cover + identity ---------------------------------------- */
.bzp-card{
  background:var(--bzp-card); border:1px solid var(--bzp-border);
  border-radius:14px; overflow:hidden; box-shadow:var(--bzp-shadow); margin-bottom:16px;
}
.bzp-cover{
  height:150px;
  background:
    radial-gradient(120% 180% at 88% -40%, rgba(169,114,28,.55) 0%, transparent 55%),
    linear-gradient(115deg,var(--bzp-navy-deep) 0%, var(--bzp-navy) 60%, #1a5c86 100%);
}
.bzp-cover--img{background-size:cover; background-position:center}
.bzp-id{padding:0 22px 20px; position:relative}
.bzp-logo{
  display:inline-block; width:104px; height:104px; margin-top:-52px;
  border-radius:16px; border:4px solid var(--bzp-card); background:var(--bzp-card);
  box-shadow:var(--bzp-shadow); overflow:hidden; line-height:0;
}
.bzp-logo img{width:100%; height:100%; object-fit:contain; background:#fff}
.bzp-name{
  font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--bzp-ink);
  margin:12px 0 2px; line-height:1.15;
}
.bzp-headline{font-size:15px; color:var(--bzp-soft); margin:0 0 4px}
.bzp-sub{font-size:13.5px; color:var(--bzp-faint); margin:0}
.bzp-sub .dot{margin:0 7px; color:var(--bzp-border)}
.bzp-verify{
  display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700;
  color:var(--bzp-ok); margin-left:8px; vertical-align:middle;
}
.bzp-stars{margin:8px 0 2px}

/* ---- action buttons ---------------------------------------------------- */
.bzp-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.bzp-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-size:14px; font-weight:700; line-height:1; padding:10px 18px; border-radius:24px;
  border:1.5px solid var(--bzp-navy); text-decoration:none; transition:transform .1s ease, background .15s;
}
.bzp-btn:hover{transform:translateY(-1px); text-decoration:none}
.bzp-btn--primary{background:var(--bzp-navy); color:#fff}
.bzp-btn--primary:hover{background:var(--bzp-navy-deep); color:#fff}
.bzp-btn--ghost{background:transparent; color:var(--bzp-navy)}
.bzp-btn--ghost:hover{background:var(--bzp-tint); color:var(--bzp-navy)}
.bzp-btn--brass{border-color:var(--bzp-brass); color:var(--bzp-brass)}
.bzp-btn--brass:hover{background:var(--bzp-brass-tint)}

/* ---- credentials / stat strip ------------------------------------------ */
.bzp-cred{
  display:flex; flex-wrap:wrap; gap:26px; margin-top:16px; padding-top:16px;
  border-top:1px solid var(--bzp-border-2);
}
.bzp-cred .stat b{display:block; font-size:18px; font-weight:800; color:var(--bzp-ink); line-height:1.1}
.bzp-cred .stat span{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--bzp-faint)}

/* ---- content sections -------------------------------------------------- */
.bzp-section{
  background:var(--bzp-card); border:1px solid var(--bzp-border); border-radius:14px;
  padding:20px 22px; margin-bottom:16px; box-shadow:var(--bzp-shadow);
}
.bzp-section > h2{
  font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--bzp-ink);
  margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--bzp-border-2);
}
.bzp-section p{font-size:15px; line-height:1.6; color:var(--bzp-soft); margin:0 0 10px}
.bzp-section a{color:var(--bzp-navy)}

/* services / specialties as chips */
.bzp-chips{display:flex; flex-wrap:wrap; gap:8px}
.bzp-chip{
  font-size:13px; color:var(--bzp-soft); background:var(--bzp-paper);
  border:1px solid var(--bzp-border); border-radius:100px; padding:6px 13px;
}

/* the reused DisplayField 2-col rows, restyled as a clean spec list */
.bzp-fields table{width:100%; border-collapse:collapse}
.bzp-fields td{font-size:14.5px; padding:8px 0; vertical-align:top; border-bottom:1px solid var(--bzp-border-2); color:var(--bzp-ink)}
.bzp-fields tr:last-child td{border-bottom:0}
/* label left, answer with a clear gap; drop the legacy FieldLabelView divider + right-align */
.bzp-fields td.FieldLabelView, .bzp-fields td.FieldLabel2{width:30%; text-align:left !important; border-right:0 !important; padding:10px 16px 8px 0 !important; font-size:13.5px; font-weight:600; color:var(--bzp-soft)}
.bzp-fields td.FieldDisplay, .bzp-fields td.FieldLabelView + td{padding:8px 0 8px 20px !important; border-left:0 !important}
.bzp-fields td td{padding:0 !important; border-bottom:0}
@media (max-width:767px){
  /* phones: stack each label above its answer */
  .bzp-fields > table > tbody > tr > td.FieldLabelView, .bzp-fields > table > tbody > tr > td.FieldLabel2{display:block; width:auto; padding:12px 0 2px !important; border-bottom:0}
  .bzp-fields > table > tbody > tr > td.FieldDisplay, .bzp-fields > table > tbody > tr > td.FieldLabelView + td{display:block; padding:0 0 12px !important}
  .bzp-fields > table > tbody > tr > td.FieldLabelView.bzp-nolabel{display:none}
  .bzp-fields > table > tbody > tr:first-child > td.bzp-nolabel + td{padding-top:4px !important}
}

/* ---- claim banner (unclaimed businesses) ------------------------------- */
.bzp-claim{
  background:var(--bzp-brass-tint); border:1px solid var(--bzp-brass);
  border-radius:12px; padding:14px 18px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.bzp-claim .t{font-size:14.5px; color:var(--bzp-navy-deep); font-weight:600}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:767px){
  .bzp-cover{height:104px}
  .bzp-logo{width:80px; height:80px; margin-top:-40px}
  .bzp-name{font-size:21px}
  .bzp-id{padding:0 16px 16px}
  .bzp-section{padding:16px}
  .bzp-cred{gap:18px}
  .bzp-actions .bzp-btn{flex:1 1 auto; justify-content:center}
}
