/* ============================================================
   Widget · Phone Button
   ============================================================
   Standalone CTA. Default tone = sage; tones picked via the
   `--tone` modifier in markup (set by Elementor's prefix_class
   from the `tone` control). Layout-mode CSS variables come
   from the layout_mode control's selectors_dictionary, so
   responsive icon-only / text-only is automatic per breakpoint.
   ============================================================ */

.bdc-phone-button {
  font-family: var(--bdc-sans);
  /* Defaults if `layout_mode` control hasn't been touched yet. */
  --bdc-pbn-text: inline;
  --bdc-pbn-icon: inline-flex;
}

.bdc-phone-button__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--bdc-r-pill);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  min-height: 48px;
  box-sizing: border-box;
}

.bdc-phone-button__btn:active {
  transform: scale(0.98);
}

.bdc-phone-button__icon {
  display: var(--bdc-pbn-icon);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bdc-phone-button__text {
  display: var(--bdc-pbn-text);
}

/* ───── Tones ─────
   prefix_class on the widget wrapper adds e.g.
   `bdc-phone-button-tone--sage` to the WRAPPER (`{{WRAPPER}}`),
   so each rule scopes through the wrapper class to the button. */

.bdc-phone-button-tone--sage .bdc-phone-button__btn {
  background: var(--bdc-sage);
  color: #fff;
}
.bdc-phone-button-tone--sage .bdc-phone-button__btn:hover,
.bdc-phone-button-tone--sage .bdc-phone-button__btn:focus {
  background: var(--bdc-sage-2);
  color: #fff;
  text-decoration: none;
}

.bdc-phone-button-tone--accent .bdc-phone-button__btn {
  background: var(--bdc-accent);
  color: #fff;
  box-shadow: 0 4px 16px -4px rgba(184,109,60,0.45);
}
.bdc-phone-button-tone--accent .bdc-phone-button__btn:hover,
.bdc-phone-button-tone--accent .bdc-phone-button__btn:focus {
  background: var(--bdc-accent-2);
  color: #fff;
  text-decoration: none;
}

.bdc-phone-button-tone--danger .bdc-phone-button__btn {
  background: var(--bdc-danger);
  color: #fff;
}
.bdc-phone-button-tone--danger .bdc-phone-button__btn:hover,
.bdc-phone-button-tone--danger .bdc-phone-button__btn:focus {
  background: #8e2a18;
  color: #fff;
  text-decoration: none;
}

.bdc-phone-button-tone--ghost .bdc-phone-button__btn {
  background: transparent;
  color: var(--bdc-sage);
  border: 1.5px solid var(--bdc-sage);
}
.bdc-phone-button-tone--ghost .bdc-phone-button__btn:hover,
.bdc-phone-button-tone--ghost .bdc-phone-button__btn:focus {
  background: var(--bdc-sage-soft);
  color: var(--bdc-sage);
  text-decoration: none;
}

/* ───── Desktop scaling ───── */

@media (min-width: 768px) {
  .bdc-phone-button__btn {
    padding: 16px 28px;
    font-size: 16px;
    gap: 12px;
    min-height: 52px;
  }
}

/* ───── Specificity safety ─────
   `<a>` is one of the most heavily theme-styled elements.
   Re-declare bg/color under `.bdc-v3` so theme `body a {color}`
   doesn't overwrite the tone palette. */

.bdc-v3 .bdc-phone-button-tone--sage .bdc-phone-button__btn {
  background: var(--bdc-sage);
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--sage .bdc-phone-button__btn:hover,
.bdc-v3 .bdc-phone-button-tone--sage .bdc-phone-button__btn:focus {
  background: var(--bdc-sage-2);
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--accent .bdc-phone-button__btn {
  background: var(--bdc-accent);
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--accent .bdc-phone-button__btn:hover,
.bdc-v3 .bdc-phone-button-tone--accent .bdc-phone-button__btn:focus {
  background: var(--bdc-accent-2);
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--danger .bdc-phone-button__btn {
  background: var(--bdc-danger);
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--danger .bdc-phone-button__btn:hover,
.bdc-v3 .bdc-phone-button-tone--danger .bdc-phone-button__btn:focus {
  background: #8e2a18;
  color: #fff;
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--ghost .bdc-phone-button__btn {
  background: transparent;
  color: var(--bdc-sage);
  text-decoration: none;
}
.bdc-v3 .bdc-phone-button-tone--ghost .bdc-phone-button__btn:hover,
.bdc-v3 .bdc-phone-button-tone--ghost .bdc-phone-button__btn:focus {
  background: var(--bdc-sage-soft);
  color: var(--bdc-sage);
  text-decoration: none;
}