/* XCellParts — Branded buttons (Elementor Button widget + xh-* header chrome)
 * Apply via Advanced → CSS Classes on each button, or via _generate.php button().
 * Tokens: xcell-brand.css
 */

/* ---- Base (all branded buttons) ---- */
.xcell-btn .elementor-button,
.xcell-btn.elementor-button{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.01em;
  transition:background .16s var(--xcell-ease),border-color .16s var(--xcell-ease),color .16s var(--xcell-ease),transform .16s var(--xcell-ease),box-shadow .16s var(--xcell-ease)!important;
  gap:8px;
}
.xcell-btn .elementor-button-content-wrapper,
.xcell-btn.elementor-button .elementor-button-content-wrapper{
  display:inline-flex;align-items:center;gap:8px;
}
.xcell-btn .elementor-button-icon,
.xcell-btn.elementor-button .elementor-button-icon{
  font-size:.92em;opacity:.95;
}

/* ---- Primary (Signature Red) ---- */
.xcell-btn--primary .elementor-button,
.xcell-btn--primary.elementor-button{
  background:var(--xcell-red-500)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:0 1px 2px rgba(14,17,22,.08);
}
.xcell-btn--primary .elementor-button:hover,
.xcell-btn--primary.elementor-button:hover{
  background:var(--xcell-red-600)!important;
  color:#fff!important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(212,32,39,.22);
}

/* ---- Secondary (ink fill) ---- */
.xcell-btn--dark .elementor-button,
.xcell-btn--dark.elementor-button,
.xcell-btn--secondary .elementor-button,
.xcell-btn--secondary.elementor-button{
  background:var(--xcell-ink-900)!important;
  color:#fff!important;
  border:1px solid transparent!important;
}
.xcell-btn--dark .elementor-button:hover,
.xcell-btn--secondary .elementor-button:hover{
  background:var(--xcell-ink-800)!important;
  color:#fff!important;
}

/* ---- Ghost (white + hairline) ---- */
.xcell-btn--ghost .elementor-button,
.xcell-btn--ghost.elementor-button{
  background:#fff!important;
  color:var(--xcell-ink-800)!important;
  border:1px solid var(--xcell-n-300)!important;
  box-shadow:none!important;
}
.xcell-btn--ghost .elementor-button:hover,
.xcell-btn--ghost.elementor-button:hover{
  border-color:var(--xcell-ink-800)!important;
  background:var(--xcell-n-50)!important;
  color:var(--xcell-ink-800)!important;
}

/* ---- Outline on dark surfaces ---- */
.xcell-btn--outline_light .elementor-button,
.xcell-btn--outline-light .elementor-button{
  background:transparent!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.45)!important;
  box-shadow:none!important;
}
.xcell-btn--outline_light .elementor-button:hover,
.xcell-btn--outline-light .elementor-button:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.7)!important;
  color:#fff!important;
}

/* ---- Native buttons / links (shortcodes, forms) ---- */
a.xcell-btn,.xcell-btn button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9999px;padding:11px 20px;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.16s var(--xcell-ease)}
a.xcell-btn--primary,button.xcell-btn--primary{background:var(--xcell-red-500);color:#fff}
a.xcell-btn--primary:hover,button.xcell-btn--primary:hover{background:var(--xcell-red-600);color:#fff}
a.xcell-btn--ghost,button.xcell-btn--ghost{background:#fff;color:var(--xcell-ink-800);border-color:var(--xcell-n-300)}
a.xcell-btn--link,button.xcell-btn--link{background:transparent;border:0;padding:6px 0;color:var(--xcell-red-600)}
a.xcell-btn--link:hover{color:var(--xcell-red-700)}

/* ---- Text link button ---- */
.xcell-link .elementor-button,
.xcell-btn--link .elementor-button{
  background:transparent!important;border:0!important;padding:6px 0!important;
  color:var(--xcell-red-600)!important;box-shadow:none!important;
}
.xcell-link .elementor-button:hover,
.xcell-btn--link .elementor-button:hover{
  color:var(--xcell-red-700)!important;transform:none;
}
.xcell-link .elementor-button-icon svg,
.xcell-btn--link .elementor-button-icon svg{transition:transform .16s var(--xcell-ease)}
.xcell-link .elementor-button:hover .elementor-button-icon svg{transform:translateX(3px)}

/* ---- Chip / pill tag ---- */
.xcell-chip .elementor-button,
.xcell-btn--chip .elementor-button{
  background:#fff!important;color:var(--xcell-ink-700)!important;
  border:1px solid var(--xcell-n-200)!important;box-shadow:none!important;
  font-weight:600!important;padding:9px 16px!important;
}
.xcell-chip .elementor-button:hover,
.xcell-btn--chip .elementor-button:hover{
  border-color:var(--xcell-red-500)!important;color:var(--xcell-red-600)!important;
}

/* ---- Header icon buttons (minimal skin) ---- */
.xcell-iconbtn .elementor-button{
  border-radius:12px!important;
  min-height:44px;
}
.xcell-iconbtn .elementor-button-icon{font-size:1.05em}

/* ---- Sizes ---- */
.xcell-btn--sm .elementor-button{padding:9px 18px!important;font-size:13.5px!important}
.xcell-btn--lg .elementor-button{padding:15px 30px!important;font-size:16px!important}

/* ---- Focus + reduced motion ---- */
.xcell-btn .elementor-button:focus-visible,
.xcell-btn.elementor-button:focus-visible{
  outline:2px solid var(--xcell-red-700);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .xcell-btn .elementor-button,.xcell-btn.elementor-button{transition:none!important}
  .xcell-btn--primary .elementor-button:hover{transform:none}
}