/* Site-wide seasonal celebration theme — linked from layout + Worker blog chrome. */

.crm-seasonal-card {
  position: fixed;
  left: 16px;
  bottom: 20px;
  z-index: 1990;
  width: min(320px, calc(100vw - 32px));
  padding: 14px 36px 14px 14px;
  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  font-family: Nunito, Inter, system-ui, sans-serif;
  animation: crm-seasonal-in 0.35s ease-out;
}

.crm-seasonal-card-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.crm-seasonal-card-close:hover {
  color: #0f172a;
}

.crm-seasonal-card-accent {
  height: 4px;
  width: 48px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.crm-seasonal-card-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  padding-right: 4px;
}

@keyframes crm-seasonal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.crm-seasonal-active .elementor-location-header {
  box-shadow: inset 0 -2px 0 var(--crm-seasonal-accent, transparent);
}

html.crm-seasonal-active {
  --e-global-color-primary: var(--crm-seasonal-accent) !important;
  --e-global-color-secondary: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
  --e-global-color-accent: var(--crm-seasonal-accent) !important;
  /* Kit "text" is brand blue (#1D40BC), not body copy. */
  --e-global-color-text: var(--crm-seasonal-accent) !important;
  --e-global-color-d3ae19d: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
  --crm-brand: var(--crm-seasonal-accent);
}

/* Homepage hero: Elementor animated headlines bake #4B6CE3 into --dynamic-text-color. */
html.crm-seasonal-active .elementor-headline,
html.crm-seasonal-active .elementor-widget-animated-headline {
  --dynamic-text-color: var(--crm-seasonal-accent) !important;
  --typing-selected-bg-color: var(--crm-seasonal-accent) !important;
  --typing-selected-color: #fff !important;
}

html.crm-seasonal-active .elementor-headline-dynamic-text,
html.crm-seasonal-active .elementor-headline-dynamic-wrapper {
  color: var(--crm-seasonal-accent) !important;
}

/* Typing animation highlight band — accent fill needs white label text. */
html.crm-seasonal-active
  .elementor-headline-animation-type-typing
  .elementor-headline-dynamic-wrapper.elementor-headline-typing-selected
  .elementor-headline-dynamic-text,
html.crm-seasonal-active
  .elementor-headline-animation-type-typing
  .elementor-headline-dynamic-wrapper.elementor-headline-typing-selected
  .elementor-headline-dynamic-letter {
  color: #fff !important;
}

/* Header mark — hue-rotate set from accent in SeasonalCelebration / crm-seasonal.js. */
html.crm-seasonal-active .elementor-location-header img[src*="crmm"],
html.crm-seasonal-active .elementor-location-header img[src*="crm-logo"],
html.crm-seasonal-active .elementor-location-header img[src*="cropped-crm"],
html.crm-seasonal-active header a[href="/"] img,
html.crm-seasonal-active header a[href="https://crm-messaging.cloud/"] img,
html.crm-seasonal-active .crm-mobile-menu-brand img {
  filter: var(--crm-seasonal-logo-filter, none);
}

/* Hardcoded brand-blue surfaces that ignore Elementor globals. */
html.crm-seasonal-active .elementor-element-5359091:not(.elementor-motion-effects-element-type-background),
html.crm-seasonal-active .elementor-element-5359091 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html.crm-seasonal-active .elementor-element-764706e:not(.elementor-motion-effects-element-type-background),
html.crm-seasonal-active .elementor-element-764706e > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html.crm-seasonal-active .elementor-element-9b39433 > .elementor-widget-container {
  background-color: var(--crm-seasonal-accent) !important;
}

/* Site footer copyright bar (theme builder post 9167) — hardcoded #2046D0. */
html.crm-seasonal-active .elementor-location-footer .elementor-element-6abd7c7:not(.elementor-motion-effects-element-type-background),
html.crm-seasonal-active .elementor-location-footer .elementor-element-6abd7c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
html.crm-seasonal-active .elementor-9167 .elementor-element-6abd7c7:not(.elementor-motion-effects-element-type-background),
html.crm-seasonal-active .elementor-9167 .elementor-element-6abd7c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--crm-seasonal-accent) !important;
}

/* Footer store / social circles — post-9167 hardcodes #1937A3 / #2046D0. */
html.crm-seasonal-active .elementor-location-footer .ekit_social_media > li > a,
html.crm-seasonal-active .elementor-9167 .ekit_social_media > li > a {
  background-color: var(--crm-seasonal-accent) !important;
  border-color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-location-footer .ekit_social_media > li > a:hover,
html.crm-seasonal-active .elementor-9167 .ekit_social_media > li > a:hover {
  background-color: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
  border-color: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
}

html.crm-seasonal-active .elementor-location-footer .ekit_social_media > li > a :is(i, svg, path),
html.crm-seasonal-active .elementor-9167 .ekit_social_media > li > a :is(i, svg, path) {
  color: #fff !important;
  fill: #fff !important;
}

/* Branded surfaces found at runtime across scraped Elementor pages. This leaves
   white content areas and photographic backgrounds intact for readability. */
html.crm-seasonal-active .crm-seasonal-surface,
html.crm-seasonal-active .crm-seasonal-surface:hover,
html.crm-seasonal-active .crm-seasonal-surface:focus {
  background-color: var(--crm-seasonal-accent) !important;
  background-image: none !important;
  border-color: var(--crm-seasonal-accent) !important;
}

/* Industry / nested tabs still paint #1D40BC — keep accent steady on hover. */
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="false"],
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="false"]:hover {
  background: var(--crm-seasonal-accent) !important;
  background-color: var(--crm-seasonal-accent) !important;
  color: #fff !important;
}

html.crm-seasonal-active .e-n-tabs {
  --n-tabs-title-color-active: var(--crm-seasonal-accent) !important;
  --n-tabs-icon-color: #fff !important;
  --n-tabs-icon-color-active: var(--crm-seasonal-accent) !important;
}

/* Selected tab stays white so accent label/icon remain visible. */
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"],
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"]:hover,
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"].crm-seasonal-surface,
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"].crm-seasonal-surface:hover {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--crm-seasonal-accent) !important;
  border-color: #fff !important;
}

html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"] i,
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"] svg,
html.crm-seasonal-active .e-n-tabs .e-n-tab-title[aria-selected="true"] path {
  color: var(--crm-seasonal-accent) !important;
  fill: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active body {
  background-image: var(--crm-seasonal-wash);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

html.crm-seasonal-active .simple-banner {
  background: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-button,
html.crm-seasonal-active .elementor-button-link,
html.crm-seasonal-active a.elementor-button,
html.crm-seasonal-active .blog-cta .btn,
html.crm-seasonal-active .blog-related-card em,
html.crm-seasonal-active .crm-search-submit,
html.crm-seasonal-active button[type="submit"] {
  background-color: var(--crm-seasonal-accent) !important;
  border-color: var(--crm-seasonal-accent) !important;
  color: #fff !important;
}

html.crm-seasonal-active .elementor-button:hover,
html.crm-seasonal-active .elementor-button-link:hover,
html.crm-seasonal-active a.elementor-button:hover,
html.crm-seasonal-active .blog-cta .btn:hover {
  background-color: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
  border-color: var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) !important;
}

/* CTAs on accent bands — flip to white so they stay visible. */
html.crm-seasonal-active .crm-seasonal-btn-contrast,
html.crm-seasonal-active .crm-seasonal-btn-contrast:hover,
html.crm-seasonal-active .crm-seasonal-btn-contrast:focus,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button-link,
html.crm-seasonal-active .crm-seasonal-surface a.elementor-button,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button:hover,
html.crm-seasonal-active .crm-seasonal-surface a.elementor-button:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--crm-seasonal-accent) !important;
  fill: var(--crm-seasonal-accent) !important;
}

/* Known white-on-brand CTA bands (home “Try it for Free”, etc.). */
html.crm-seasonal-active .elementor-element-764706e .elementor-button,
html.crm-seasonal-active .elementor-element-764706e a.elementor-button,
html.crm-seasonal-active .elementor-element-5359091 .elementor-button,
html.crm-seasonal-active .elementor-element-5359091 a.elementor-button,
html.crm-seasonal-active .elementor-element-6abd7c7 .elementor-button,
html.crm-seasonal-active .elementor-element-6abd7c7 a.elementor-button {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--crm-seasonal-accent) !important;
  fill: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .crm-seasonal-btn-contrast .elementor-button-text,
html.crm-seasonal-active .crm-seasonal-btn-contrast .elementor-button-icon,
html.crm-seasonal-active .crm-seasonal-btn-contrast i,
html.crm-seasonal-active .crm-seasonal-btn-contrast svg,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button .elementor-button-text,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button i,
html.crm-seasonal-active .crm-seasonal-surface .elementor-button svg,
html.crm-seasonal-active .elementor-element-764706e .elementor-button .elementor-button-text,
html.crm-seasonal-active .elementor-element-764706e .elementor-button i,
html.crm-seasonal-active .elementor-element-764706e .elementor-button svg {
  color: var(--crm-seasonal-accent) !important;
  fill: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-button[class*="outline"],
html.crm-seasonal-active .elementor-button.elementor-button-link.elementskit-btn {
  color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-heading-title span[style*="2046"],
html.crm-seasonal-active .elementor-heading-title span[style*="4B6CE3"],
html.crm-seasonal-active .elementor-heading-title span[style*="1D40BC"],
html.crm-seasonal-active .elementor-heading-title span[style*="5556FD"],
html.crm-seasonal-active .elementor-heading-title b[style*="color"],
html.crm-seasonal-active .elementor-heading-title strong[style*="color"] {
  color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-location-header .elementor-button,
html.crm-seasonal-active header .elementor-button {
  background-color: var(--crm-seasonal-accent) !important;
  border-color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-location-header .elementor-button.elementor-button-link[href*="app.crm-messaging"],
html.crm-seasonal-active header a.elementor-button[href*="app.crm-messaging"] {
  background-color: transparent !important;
  color: var(--crm-seasonal-accent) !important;
  border: 1px solid var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .blog-cta {
  background: linear-gradient(
    135deg,
    var(--crm-seasonal-accent) 0%,
    var(--crm-seasonal-secondary, var(--crm-seasonal-accent)) 100%
  ) !important;
}

html.crm-seasonal-active .blog-related-card:hover,
html.crm-seasonal-active .blog-toc a:hover,
html.crm-seasonal-active .betterdocs-content a,
html.crm-seasonal-active .crm-ai-blog a:not(.btn):not(.elementor-button) {
  color: var(--crm-seasonal-accent);
}

html.crm-seasonal-active .gt_switcher,
html.crm-seasonal-active .gt_switcher .gt_selected,
html.crm-seasonal-active .gt_selected,
html.crm-seasonal-active .gt_float_switcher,
html.crm-seasonal-active .gt_float_switcher .gt-selected,
html.crm-seasonal-active .gt_switcher_wrapper .gt_switcher,
html.crm-seasonal-active .gt_switcher_wrapper .gt_selected {
  background: var(--crm-seasonal-accent) !important;
  background-color: var(--crm-seasonal-accent) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* GTranslate paints switcher_border_color on inner parts too (.gt_option). */
html.crm-seasonal-active .gt_switcher_wrapper *,
html.crm-seasonal-active .gtranslate_wrapper * {
  border-color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .gt_selected a,
html.crm-seasonal-active .gt_float_switcher .gt-selected,
html.crm-seasonal-active .gt_switcher .gt_selected a {
  background: transparent !important;
  background-color: transparent !important;
}

/* HelloCRM live-chat bubble — API defaults to brand blue; match celebration accent. */
html.crm-seasonal-active #live-chatbot-toggle-button {
  background: var(--crm-seasonal-accent) !important;
  background-color: var(--crm-seasonal-accent) !important;
}

/* Pricing (/pricing/) — plan headers, channel tabs, accent bands. */
html.crm-seasonal-active .elementor-3951 .elementor-widget-price-table {
  --e-price-table-header-background-color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-3951 .elementor-price-table__header {
  background: var(--crm-seasonal-accent) !important;
  background-color: var(--crm-seasonal-accent) !important;
}

html.crm-seasonal-active .elementor-3951 .elementor-element-59388cd9 > .elementor-widget-container,
html.crm-seasonal-active .elementor-3951 .elementor-element-79dfe166 > .elementor-widget-container {
  background-color: var(--crm-seasonal-accent) !important;
}

/* Channel tabs — selected was white-on-white; inactive pills stay accent. */
html.crm-seasonal-active .elementor-3951 .elementor-element-34fed430 .e-n-tabs-heading {
  align-items: flex-end !important;
  gap: 10px !important;
}

html.crm-seasonal-active .elementor-3951 .elementor-element-34fed430 .e-n-tab-title {
  align-self: flex-end !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding-inline: 1.25rem !important;
}

html.crm-seasonal-active
  .elementor-3951
  .elementor-element-34fed430
  .e-n-tab-title[aria-selected="false"],
html.crm-seasonal-active
  .elementor-3951
  .elementor-element-34fed430
  .e-n-tab-title[aria-selected="false"]:hover {
  background: var(--crm-seasonal-accent) !important;
  background-color: var(--crm-seasonal-accent) !important;
  border: 2px solid var(--crm-seasonal-accent) !important;
  border-radius: 20px 20px 0 0 !important;
  color: #fff !important;
}

html.crm-seasonal-active
  .elementor-3951
  .elementor-element-34fed430
  .e-n-tab-title[aria-selected="true"],
html.crm-seasonal-active
  .elementor-3951
  .elementor-element-34fed430
  .e-n-tab-title[aria-selected="true"]:hover {
  background: #fff !important;
  background-color: #fff !important;
  border: 2px solid var(--crm-seasonal-accent) !important;
  border-bottom-color: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
  color: var(--crm-seasonal-accent) !important;
  margin-bottom: -2px !important;
  position: relative !important;
  z-index: 1 !important;
}

html.crm-seasonal-active
  .elementor-3951
  .elementor-element-34fed430
  .e-n-tab-title[aria-selected="false"]
  :is(.e-n-tab-title-text, i, svg, path) {
  color: #fff !important;
  fill: #fff !important;
}

@media (max-width: 640px) {
  .crm-seasonal-card {
    left: 12px;
    right: 12px;
    bottom: 16px;
    width: auto;
  }
}