/* ==========================================================================
   TextCRM — Global UI layer (unified buttons + filled badges)
   --------------------------------------------------------------------------
   Single source of truth for the look of every call-to-action BUTTON and every
   filled-green BADGE across the site. It makes them all match the TextCRM Hero
   action button — same border, radius, font, size and padding — and renders the
   text on filled-green surfaces in WHITE.

   WHY a dedicated, !important layer (same rationale as color-mode.css):
   Each widget ships its own button CSS, and Elementor bakes per-widget button
   control values (colours, padding, radius…) into the per-page stylesheet
   (post-XX.css) that loads AFTER our files at equal-or-higher specificity. To
   reliably unify regardless of load order, the declarations here are marked
   !important. This file is enqueued LAST (after color-mode.css), so where the
   two overlap on button colour, this layer wins.

   SCOPE — only true CTA "link buttons" are touched. Deliberately EXCLUDED:
     • floating icon controls: .textcrm-scrolltop__btn, .textcrm-whatsapp__btn
     • the WhatsApp-branded CTA: .textcrm-whatsapp__cta
     • text/arrow links: .textcrm-vexcel__cta
   so their bespoke shapes/branding keep working.

   Brand green #42c67a · darker hover #38b069 · on-green text #ffffff.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Canonical TYPE SYSTEM tokens — single source of truth, site-wide.
   --------------------------------------------------------------------------
   The home-page redesign widgets (Hero, Trusted, Unified Inbox, Flow Builder,
   How It Works, Benefits, Testimonials, Final CTA, Header, Footer) introduced a
   three-font system. These :root tokens expose that exact system so EVERY other
   widget can consume it and the whole site stays consistent:

     • --textcrm-font-display → Space Grotesk   (headings, titles, big stat numbers)
     • --textcrm-font-body    → Manrope         (default body / UI text — set on the wrapper)
     • --textcrm-font-accent  → Instrument Serif (italic display-highlight accents)

   Defined on :root so it is available document-wide regardless of stylesheet
   load order (custom properties resolve at use time). The redesign widgets
   predate these tokens and keep their own (identical) scoped definitions; all
   newly-unified widgets reference the tokens below.
   -------------------------------------------------------------------------- */
:root {
	--textcrm-font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--textcrm-font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--textcrm-font-accent:  'Instrument Serif', 'Times New Roman', Georgia, serif;
}

/* --------------------------------------------------------------------------
   1) Shared shape + typography — identical to .textcrm-hero__btn
   -------------------------------------------------------------------------- */
.textcrm-header__cta,
.textcrm-hero__btn,
.textcrm-inner-hero__btn,
.textcrm-solutions-hero__btn,
.textcrm-pricing__cta,
.textcrm-final-cta__btn,
.textcrm-solutions-cta__btn,
.textcrm-story__btn,
.textcrm-404__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 16px 28px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

/* --------------------------------------------------------------------------
   2) Primary / filled buttons — brand green, WHITE text (both color modes)
   -------------------------------------------------------------------------- */
.textcrm-header__cta,
.textcrm-hero__btn--primary,
.textcrm-inner-hero__btn--primary,
.textcrm-solutions-hero__btn--primary,
.textcrm-pricing__cta--primary,
.textcrm-final-cta__btn--primary,
.textcrm-solutions-cta__btn--primary,
.textcrm-story__btn,
.textcrm-404__btn--primary,
body.textcrm-mode-light .textcrm-header__cta,
body.textcrm-mode-light .textcrm-hero__btn--primary,
body.textcrm-mode-light .textcrm-inner-hero__btn--primary,
body.textcrm-mode-light .textcrm-solutions-hero__btn--primary,
body.textcrm-mode-light .textcrm-pricing__cta--primary,
body.textcrm-mode-light .textcrm-final-cta__btn--primary,
body.textcrm-mode-light .textcrm-solutions-cta__btn--primary,
body.textcrm-mode-light .textcrm-story__btn,
body.textcrm-mode-light .textcrm-404__btn--primary {
	background-color: #42c67a !important;
	color: #ffffff !important;
	border-color: transparent !important;
	box-shadow: 0 10px 30px -12px rgba(66, 198, 122, 0.5) !important;
}

.textcrm-header__cta:hover,
.textcrm-header__cta:focus-visible,
.textcrm-hero__btn--primary:hover,
.textcrm-hero__btn--primary:focus-visible,
.textcrm-inner-hero__btn--primary:hover,
.textcrm-inner-hero__btn--primary:focus-visible,
.textcrm-solutions-hero__btn--primary:hover,
.textcrm-solutions-hero__btn--primary:focus-visible,
.textcrm-pricing__cta--primary:hover,
.textcrm-pricing__cta--primary:focus-visible,
.textcrm-final-cta__btn--primary:hover,
.textcrm-final-cta__btn--primary:focus-visible,
.textcrm-solutions-cta__btn--primary:hover,
.textcrm-solutions-cta__btn--primary:focus-visible,
.textcrm-story__btn:hover,
.textcrm-story__btn:focus-visible,
.textcrm-404__btn--primary:hover,
.textcrm-404__btn--primary:focus-visible,
body.textcrm-mode-light .textcrm-header__cta:hover,
body.textcrm-mode-light .textcrm-hero__btn--primary:hover,
body.textcrm-mode-light .textcrm-inner-hero__btn--primary:hover,
body.textcrm-mode-light .textcrm-solutions-hero__btn--primary:hover,
body.textcrm-mode-light .textcrm-pricing__cta--primary:hover,
body.textcrm-mode-light .textcrm-final-cta__btn--primary:hover,
body.textcrm-mode-light .textcrm-solutions-cta__btn--primary:hover,
body.textcrm-mode-light .textcrm-story__btn:hover,
body.textcrm-mode-light .textcrm-404__btn--primary:hover {
	background-color: #38b069 !important;
	color: #ffffff !important;
	box-shadow: 0 16px 40px -12px rgba(66, 198, 122, 0.55) !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   3) Secondary / ghost buttons — transparent with a hairline border, hover to
   brand green. Text colour follows the active color mode.
   -------------------------------------------------------------------------- */
.textcrm-hero__btn--ghost,
.textcrm-inner-hero__btn--secondary,
.textcrm-solutions-hero__btn--secondary,
.textcrm-pricing__cta--outline,
.textcrm-final-cta__btn--secondary,
.textcrm-solutions-cta__btn--secondary,
.textcrm-404__btn--secondary {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.13) !important;
	color: #eaf0fb !important;
	box-shadow: none !important;
}

body.textcrm-mode-light .textcrm-hero__btn--ghost,
body.textcrm-mode-light .textcrm-inner-hero__btn--secondary,
body.textcrm-mode-light .textcrm-solutions-hero__btn--secondary,
body.textcrm-mode-light .textcrm-pricing__cta--outline,
body.textcrm-mode-light .textcrm-final-cta__btn--secondary,
body.textcrm-mode-light .textcrm-solutions-cta__btn--secondary,
body.textcrm-mode-light .textcrm-404__btn--secondary {
	border-color: rgba(11, 19, 38, 0.18) !important;
	color: #1f2937 !important;
}

.textcrm-hero__btn--ghost:hover,
.textcrm-hero__btn--ghost:focus-visible,
.textcrm-inner-hero__btn--secondary:hover,
.textcrm-inner-hero__btn--secondary:focus-visible,
.textcrm-solutions-hero__btn--secondary:hover,
.textcrm-solutions-hero__btn--secondary:focus-visible,
.textcrm-pricing__cta--outline:hover,
.textcrm-pricing__cta--outline:focus-visible,
.textcrm-final-cta__btn--secondary:hover,
.textcrm-final-cta__btn--secondary:focus-visible,
.textcrm-solutions-cta__btn--secondary:hover,
.textcrm-solutions-cta__btn--secondary:focus-visible,
.textcrm-404__btn--secondary:hover,
.textcrm-404__btn--secondary:focus-visible,
body.textcrm-mode-light .textcrm-hero__btn--ghost:hover,
body.textcrm-mode-light .textcrm-inner-hero__btn--secondary:hover,
body.textcrm-mode-light .textcrm-solutions-hero__btn--secondary:hover,
body.textcrm-mode-light .textcrm-pricing__cta--outline:hover,
body.textcrm-mode-light .textcrm-final-cta__btn--secondary:hover,
body.textcrm-mode-light .textcrm-solutions-cta__btn--secondary:hover,
body.textcrm-mode-light .textcrm-404__btn--secondary:hover {
	background-color: transparent !important;
	border-color: #42c67a !important;
	color: #42c67a !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   3b) Contact form submit — a filled-green primary, but scoped under
   `.textcrm-contact` (and overridden by color-mode at higher specificity), so
   it needs its own matching-specificity rule. Keeps its full-width sizing and
   accessible focus ring; just re-skins to the unified look + white text.
   -------------------------------------------------------------------------- */
.textcrm-contact .textcrm-contact__submit,
body.textcrm-mode-light .textcrm-contact .textcrm-contact__submit {
	gap: 10px !important;
	padding: 16px 28px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	background-color: #42c67a !important;
	color: #ffffff !important;
	box-shadow: 0 10px 30px -12px rgba(66, 198, 122, 0.5) !important;
}
.textcrm-contact .textcrm-contact__submit:hover {
	background-color: #38b069 !important;
	color: #ffffff !important;
	box-shadow: 0 16px 40px -12px rgba(66, 198, 122, 0.55) !important;
}
.textcrm-contact .textcrm-contact__submit:focus-visible {
	box-shadow: 0 0 0 3px rgba(66, 198, 122, 0.45) !important;
	outline: none;
}

/* --------------------------------------------------------------------------
   4) Filled-green badges — WHITE text (the hero "NEW" tag + the pricing
   "Most Popular" pill). Tinted/translucent badges are intentionally untouched.
   -------------------------------------------------------------------------- */
.textcrm-hero__eyebrow-tag,
.textcrm-pricing__card-badge,
body.textcrm-mode-light .textcrm-hero__eyebrow-tag,
body.textcrm-mode-light .textcrm-pricing__card-badge {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   5) Floating / icon brand buttons — scroll-to-top + AI chat launcher & send.
   These are round/utility controls, so they keep their own SHAPE and size;
   only the brand treatment is unified to match the CTAs: flat brand green, a
   WHITE icon, and the same darker-green hover + green glow.
   Intentionally NOT touched: the chat's subtle close "X" (a dismiss control),
   the tinted suggestion chips, and the WhatsApp-branded escalation CTA.
   -------------------------------------------------------------------------- */
.textcrm-scrolltop__btn,
.textcrm-ai-chat__launcher,
.textcrm-ai-chat__send {
	background-color: #42c67a !important;
	background-image: none !important;
	color: #ffffff !important;
	box-shadow: 0 10px 30px -12px rgba(66, 198, 122, 0.5) !important;
}

.textcrm-scrolltop__btn:hover,
.textcrm-ai-chat__launcher:hover,
.textcrm-ai-chat__send:hover {
	background-color: #38b069 !important;
	color: #ffffff !important;
	box-shadow: 0 16px 40px -12px rgba(66, 198, 122, 0.55) !important;
}

/* Preserve the send button's muted disabled state (no green glow leaking through). */
.textcrm-ai-chat__send:disabled {
	box-shadow: none !important;
}

/* Bot avatar — match the buttons: flat brand green fill + white glyph (was a
   teal→green gradient with a dark glyph). For an uploaded photo avatar the image
   covers the fill, so only the default robot glyph is recoloured. */
.textcrm-ai-chat__avatar {
	background: #42c67a !important;
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   6) Header nav + login links — on hover / focus / active, colour the text the
   SAME brand green as the nav underline. (The theme baked the hover colour to a
   near-white that washed out on the light header.)
   -------------------------------------------------------------------------- */
.textcrm-header__menu a:hover,
.textcrm-header__menu a:focus-visible,
.textcrm-header__menu a.is-active,
.textcrm-header__drawer-menu a:hover,
.textcrm-header__drawer-menu a:focus-visible,
.textcrm-header__drawer-menu a.is-active,
.textcrm-header__login:hover,
.textcrm-header__login:focus-visible {
	color: #42c67a !important;
}