/* HousecallPro Widget — Orange Crew branded overrides */

/* Override HCP default green button with Orange Crew orange */
/*
 * Safe normalizations (cursor / transitions / no underline) apply to BOTH
 * HousecallPro's injected `.hcp-button` and any anchor/button we wire up
 * with onclick="HCPWidget…".
 *
 * The white text color, however, is only forced on `.hcp-button` — it is
 * the only element that always sits on the orange HCP background. Our own
 * site buttons (.btn-primary, .btn-secondary, .btn-ghost-light, …) already
 * pick the right text color for their own background, so we must NOT
 * override that here or buttons like `btn-secondary` (white bg) end up
 * with invisible white-on-white text.
 */
.hcp-button,
button.hcp-button,
a.hcp-button,
a[onclick*="HCPWidget"],
button[onclick*="HCPWidget"] {
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  text-decoration: none !important;
}
.hcp-button,
button.hcp-button,
a.hcp-button {
  color: #fff !important;
}
.hcp-button:hover,
button.hcp-button:hover,
a.hcp-button:hover {
  color: #fff !important;
}

/* Hero banner: orange by default, transparent on hover like neighbor buttons */
.top-banner-btn-cls a[onclick*="HCPWidget"],
.top-banner-btn-cls .hcp-button,
.top-banner-btn-cls a.hcp-button {
  background: linear-gradient(135deg, #f6851f 0%, #ed6f23 100%) !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
}
.top-banner-btn-cls a[onclick*="HCPWidget"]:hover,
.top-banner-btn-cls .hcp-button:hover,
.top-banner-btn-cls a.hcp-button:hover {
  background: transparent !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* Override the HCP modal iframe wrapper to match brand */
.hcp-modal-overlay,
.hcp_modal_overlay,
div[class*="hcp"][class*="overlay"] {
  background: rgba(0, 0, 0, 0.65) !important;
}

.hcp-modal,
.hcp_modal,
div[class*="hcp"][class*="modal"]:not([class*="overlay"]) {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}