/* WHITE GOLD MEDIA CRM — Services & Pricing v206
   Presentation and catalogue hygiene only. Pricing formulas are unchanged. */

.pe-service-card {
  position: relative;
  padding: 14px;
  border: 1px solid #d7e0e8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(28,45,63,.045);
  transition: border-color .15s, box-shadow .15s;
}

.pe-service-card:hover {
  box-shadow: 0 7px 20px rgba(28,45,63,.075);
}

.pe-service-card--review {
  border-color: #d3a947 !important;
  background: #fffaf0;
}

.pe-review-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding: 10px 12px;
  border: 1px solid #d8b968;
  border-radius: 9px;
  background: #fff9e9;
  color: #3d4b59;
}

.pe-review-strip strong {
  display: block;
  color: #5f4612;
  font-size: 11px;
}

.pe-review-strip span {
  display: block;
  margin-top: 2px;
  color: #687482;
  font-size: 10px;
  line-height: 1.45;
}

.pe-review-reasons,
.pe-review-inline {
  color: #835f16;
  font-size: 10px;
  line-height: 1.4;
}

.pe-review-reasons {
  margin: -1px 0 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff1cb;
}

.pe-card-hours {
  margin-top: 2px;
  color: #647586;
  font-size: 10px;
}

.pe-category-card {
  width: 100%;
  min-height: 116px;
  padding: 14px;
  border: 1px solid #d5dfe8;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-align: center;
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.pe-category-card:hover,
.pe-category-card:focus-visible {
  border-color: #b28a2f;
  box-shadow: 0 6px 18px rgba(28,45,63,.08);
  transform: translateY(-1px);
  outline: none;
}

/* Legacy pricing modals used a dark shell while their text variables were from
   the light CRM theme, producing black-on-black content. Normalise the shell. */
#pe-modal-overlay {
  --wgm-ink: #1c2e40;
  --wgm-ink-muted: #5e7081;
  --wgm-ink-subtle: #738190;
  --wgm-ink-on-dark: #1c2e40;
}

#pe-modal-overlay > div {
  background: #fff !important;
  border-color: #cfd9e2 !important;
  color: #1c2e40 !important;
  box-shadow: 0 22px 65px rgba(17,30,43,.28) !important;
}

#pe-modal-overlay input,
#pe-modal-overlay textarea,
#pe-modal-overlay select {
  background: #f8fafc !important;
  border-color: #bdc9d4 !important;
  color: #1c2e40 !important;
}

#pe-modal-overlay input:focus,
#pe-modal-overlay textarea:focus,
#pe-modal-overlay select:focus {
  border-color: #9a7729 !important;
  outline: 2px solid rgba(201,168,76,.2) !important;
  outline-offset: 1px;
}

#pe-modal-overlay [style*="border-bottom:1px solid rgba(255,255,255"] {
  border-bottom-color: #dbe3ea !important;
}

#pe-modal-overlay [style*="border-top:1px solid rgba(255,255,255"] {
  border-top-color: #dbe3ea !important;
}

@media (max-width: 720px) {
  .pe-review-strip { align-items: stretch; flex-direction: column; }
  .pe-review-strip .btn { align-self: flex-start; }
  #pe-modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  #pe-modal-overlay > div,
  #pe-modal-overlay > section { max-height: 92vh !important; border-radius: 14px 14px 8px 8px !important; }
}