/**
 * Global Color System - NEOCRM
 * Based on Figma Design System
 * Colors: Purple, Blue, and Neutral (Black/Gray) scales
 */

 :root {
  /* Purple Color Scale */
  --purple-50: #faf5ff;
  --purple-100: #f4e7ff;
  --purple-200: #ead3ff;
  --purple-300: #dab0ff;
  --purple-400: #c37eff;
  --purple-500: #a53eff; /* Primary Purple */
  --purple-600: #972af3;
  --purple-700: #831ad6;
  --purple-800: #6f1aaf;
  --purple-900: #5b178c;
  --purple-950: #3e0269;

  /* Blue Color Scale */
  --blue-50: #eef6ff;
  --blue-100: #d9eaff;
  --blue-200: #bcdbff;
  --blue-300: #8ec5ff;
  --blue-400: #59a4ff;
  --blue-500: #3783ff; /* Primary Blue */
  --blue-600: #1b5ff5;
  --blue-700: #144ae1;
  --blue-800: #173cb6;
  --blue-900: #19378f;
  --blue-950: #142357;

  /* Neutral/Black Color Scale */
  --neutral-50: #f6f7f9;
  --neutral-100: #eceff2;
  --neutral-200: #d4dae3;
  --neutral-300: #aebbcb;
  --neutral-400: #8396ad;
  --neutral-500: #637994;
  --neutral-600: #4f617a;
  --neutral-700: #404e64;
  --neutral-800: #364151; /* Primary Neutral */
  --neutral-900: #323b48;
  --neutral-950: #212630;

  /* Additional Brand Colors from Header */
  --brand-yellow: #ffcd14;
  --brand-blue-dark: #033660;

  /* Semantic Color Aliases */
  --color-primary: var(--purple-500);
  --color-primary-dark: var(--purple-600);
  --color-primary-light: var(--purple-400);
  
  --color-secondary: var(--blue-500);
  --color-secondary-dark: var(--blue-600);
  --color-secondary-light: var(--blue-400);
  
  --color-text: var(--neutral-800);
  --color-text-light: var(--neutral-600);
  --color-text-dark: var(--neutral-900);
  --color-text-muted: var(--neutral-500);
  
  --color-background: #ffffff;
  --color-background-light: var(--neutral-50);
  --color-background-gray: var(--neutral-100);
  
  --color-border: var(--neutral-200);
  --color-border-dark: var(--neutral-300);

  /* Additional Design Tokens */
  --White: #ffffff;
  --Gradient-45: linear-gradient(158deg, var(--blue-500, #3783ff) 0%, var(--purple-500, #a53eff) 100%);
  --Gradient-45-border: var(--Gradient-45);
}

/* Utility Classes for Colors */

/* Purple Backgrounds */
.bg-purple-50 { background-color: var(--purple-50); }
.bg-purple-100 { background-color: var(--purple-100); }
.bg-purple-200 { background-color: var(--purple-200); }
.bg-purple-300 { background-color: var(--purple-300); }
.bg-purple-400 { background-color: var(--purple-400); }
.bg-purple-500 { background-color: var(--purple-500); }
.bg-purple-600 { background-color: var(--purple-600); }
.bg-purple-700 { background-color: var(--purple-700); }
.bg-purple-800 { background-color: var(--purple-800); }
.bg-purple-900 { background-color: var(--purple-900); }
.bg-purple-950 { background-color: var(--purple-950); }

/* Blue Backgrounds */
.bg-blue-50 { background-color: var(--blue-50); }
.bg-blue-100 { background-color: var(--blue-100); }
.bg-blue-200 { background-color: var(--blue-200); }
.bg-blue-300 { background-color: var(--blue-300); }
.bg-blue-400 { background-color: var(--blue-400); }
.bg-blue-500 { background-color: var(--blue-500); }
.bg-blue-600 { background-color: var(--blue-600); }
.bg-blue-700 { background-color: var(--blue-700); }
.bg-blue-800 { background-color: var(--blue-800); }
.bg-blue-900 { background-color: var(--blue-900); }
.bg-blue-950 { background-color: var(--blue-950); }

/* Neutral Backgrounds */
.bg-neutral-50 { background-color: var(--neutral-50); }
.bg-neutral-100 { background-color: var(--neutral-100); }
.bg-neutral-200 { background-color: var(--neutral-200); }
.bg-neutral-300 { background-color: var(--neutral-300); }
.bg-neutral-400 { background-color: var(--neutral-400); }
.bg-neutral-500 { background-color: var(--neutral-500); }
.bg-neutral-600 { background-color: var(--neutral-600); }
.bg-neutral-700 { background-color: var(--neutral-700); }
.bg-neutral-800 { background-color: var(--neutral-800); }
.bg-neutral-900 { background-color: var(--neutral-900); }
.bg-neutral-950 { background-color: var(--neutral-950); }

/* Purple Text Colors */
.text-purple-50 { color: var(--purple-50); }
.text-purple-100 { color: var(--purple-100); }
.text-purple-200 { color: var(--purple-200); }
.text-purple-300 { color: var(--purple-300); }
.text-purple-400 { color: var(--purple-400); }
.text-purple-500 { color: var(--purple-500); }
.text-purple-600 { color: var(--purple-600); }
.text-purple-700 { color: var(--purple-700); }
.text-purple-800 { color: var(--purple-800); }
.text-purple-900 { color: var(--purple-900); }
.text-purple-950 { color: var(--purple-950); }

/* Blue Text Colors */
.text-blue-50 { color: var(--blue-50); }
.text-blue-100 { color: var(--blue-100); }
.text-blue-200 { color: var(--blue-200); }
.text-blue-300 { color: var(--blue-300); }
.text-blue-400 { color: var(--blue-400); }
.text-blue-500 { color: var(--blue-500); }
.text-blue-600 { color: var(--blue-600); }
.text-blue-700 { color: var(--blue-700); }
.text-blue-800 { color: var(--blue-800); }
.text-blue-900 { color: var(--blue-900); }
.text-blue-950 { color: var(--blue-950); }

/* Neutral Text Colors */
.text-neutral-50 { color: var(--neutral-50); }
.text-neutral-100 { color: var(--neutral-100); }
.text-neutral-200 { color: var(--neutral-200); }
.text-neutral-300 { color: var(--neutral-300); }
.text-neutral-400 { color: var(--neutral-400); }
.text-neutral-500 { color: var(--neutral-500); }
.text-neutral-600 { color: var(--neutral-600); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-800 { color: var(--neutral-800); }
.text-neutral-900 { color: var(--neutral-900); }
.text-neutral-950 { color: var(--neutral-950); }

/* Border Colors */
.border-purple-50 { border-color: var(--purple-50); }
.border-purple-100 { border-color: var(--purple-100); }
.border-purple-200 { border-color: var(--purple-200); }
.border-purple-300 { border-color: var(--purple-300); }
.border-purple-400 { border-color: var(--purple-400); }
.border-purple-500 { border-color: var(--purple-500); }
.border-purple-600 { border-color: var(--purple-600); }
.border-purple-700 { border-color: var(--purple-700); }
.border-purple-800 { border-color: var(--purple-800); }
.border-purple-900 { border-color: var(--purple-900); }
.border-purple-950 { border-color: var(--purple-950); }

.border-blue-50 { border-color: var(--blue-50); }
.border-blue-100 { border-color: var(--blue-100); }
.border-blue-200 { border-color: var(--blue-200); }
.border-blue-300 { border-color: var(--blue-300); }
.border-blue-400 { border-color: var(--blue-400); }
.border-blue-500 { border-color: var(--blue-500); }
.border-blue-600 { border-color: var(--blue-600); }
.border-blue-700 { border-color: var(--blue-700); }
.border-blue-800 { border-color: var(--blue-800); }
.border-blue-900 { border-color: var(--blue-900); }
.border-blue-950 { border-color: var(--blue-950); }

.border-neutral-50 { border-color: var(--neutral-50); }
.border-neutral-100 { border-color: var(--neutral-100); }
.border-neutral-200 { border-color: var(--neutral-200); }
.border-neutral-300 { border-color: var(--neutral-300); }
.border-neutral-400 { border-color: var(--neutral-400); }
.border-neutral-500 { border-color: var(--neutral-500); }
.border-neutral-600 { border-color: var(--neutral-600); }
.border-neutral-700 { border-color: var(--neutral-700); }
.border-neutral-800 { border-color: var(--neutral-800); }
.border-neutral-900 { border-color: var(--neutral-900); }
.border-neutral-950 { border-color: var(--neutral-950); }

/* Semantic Utility Classes */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-default { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.border-default { border-color: var(--color-border); }

/* Text Color Adjustments for Contrast */
.bg-purple-50,
.bg-purple-100,
.bg-purple-200,
.bg-purple-300,
.bg-blue-50,
.bg-blue-100,
.bg-blue-200,
.bg-blue-300,
.bg-neutral-50,
.bg-neutral-100,
.bg-neutral-200 {
  color: #000000;
}

.bg-purple-400,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-purple-800,
.bg-purple-900,
.bg-purple-950,
.bg-blue-400,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-blue-900,
.bg-blue-950,
.bg-neutral-400,
.bg-neutral-500,
.bg-neutral-600,
.bg-neutral-700,
.bg-neutral-800,
.bg-neutral-900,
.bg-neutral-950 {
  color: #ffffff;
}

/* Container Hover Effects */
.container-hover-1 {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--White), var(--White)) padding-box,
    var(--Gradient-45-border) border-box !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.container-hover-1:hover {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: var(--Gradient-45) !important;
  box-shadow: 0 0 60px 0 rgba(165, 62, 255, 0.50) !important;
}

/* Text & icons turn white on hover — except inside .non and .elementor-widget-button */
.container-hover-1:hover > .elementor-icon-box-title,
.container-hover-1:hover > .elementor-icon-box-title span,
.container-hover-1:hover > .elementor-icon-box-description,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-box-title,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-box-title span,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-box-description,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-list-text,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-list-icon,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon-list-icon i,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .elementor-icon i,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) i,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) p,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) span,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h1,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h2,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h3,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h4,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h5,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) h6 {
  color: #ffffff !important;
}

.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg path,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg circle,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg rect,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg polygon,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg polyline,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg line,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) svg ellipse {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Background-image icons (neocrm-icon via <i>) — use filter to turn white */
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) .neocrm-icon,
.container-hover-1:hover > :not(.non):not(.elementor-widget-button) i.neocrm-icon {
  filter: brightness(0) invert(1) !important;
}

/* .non containers get a white background on parent hover, text stays unchanged */
.container-hover-1:hover > .non {
  background-color: #f2f8ff !important;
  border-radius: 10px !important;
}

/* Prevent white color inheritance leaking into .non */
.container-hover-1:hover > .non,
.container-hover-1:hover > .non *,
.container-hover-1:hover > .non span,
.container-hover-1:hover > .non p,
.container-hover-1:hover > .non h1,
.container-hover-1:hover > .non h2,
.container-hover-1:hover > .non h3,
.container-hover-1:hover > .non h4,
.container-hover-1:hover > .non h5,
.container-hover-1:hover > .non h6,
.container-hover-1:hover > .non i {
  color: inherit !important;
}

.container-hover-group:hover .container-hover-1:not(:hover) {
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-image-source: var(--Gradient-45-border) !important;
  border-image-slice: 1 !important;
}

.container-hover-1:hover ~ .container-hover-1 {
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-image-source: var(--Gradient-45-border) !important;
  border-image-slice: 1 !important;
}

:has(.container-hover-1:hover) .container-hover-1:not(:hover) {
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-image-source: var(--Gradient-45-border) !important;
  border-image-slice: 1 !important;
}

.container-normal {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--White), var(--White)) padding-box,
    var(--Gradient-45-border) border-box !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

/* Alias: grainy gradient card hover effect (theme version) */
.contaner-no-button {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--White), var(--White)) padding-box,
    var(--Gradient-45-border) border-box !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

.contaner-no-button:hover {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--White), var(--White)) padding-box,
    var(--Gradient-45-border) border-box !important;
  box-shadow: 0 0 60px 0 rgba(165, 62, 255, 0.50) !important;
}

/* ─── Magic Card (reverse) ─────────────────────────────────────────────────
   Default : static gradient border (no animation)
   Hover   : spinning gradient border + blurred glow, like magic-card default
   ───────────────────────────────────────────────────────────────────────── */

@property --neo-rotate {
  syntax: "<angle>";
  /* Match the design token’s base direction (see --Gradient-45 = 158deg) */
  initial-value: 158deg;
  inherits: false;
}

@keyframes neo-magic-spin {
  0%   { --neo-rotate: 0deg; }
  100% { --neo-rotate: 360deg; }
}

/* No isolation here: with isolate, ::after at z-index:-1 paints *above* the white fill
   (stacking order inside a stacking context). Glow must sit behind the card in the parent context. */
.contaner-with-button,
.container-with-button {
  position: relative !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--White), var(--White)) padding-box,
    linear-gradient(
      var(--neo-rotate),
      var(--blue-500, #3783ff),
      var(--purple-500, #a53eff) 43%,
      var(--blue-500, #3783ff)
    ) border-box !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease !important;
}

/* Crisp spinning border — hidden by default, revealed on hover */
.contaner-with-button::before {
  content: none !important;
}

/* Blurred outer glow — hidden by default, revealed on hover */
.contaner-with-button::after {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: inherit !important;
  background: linear-gradient(
    var(--neo-rotate),
    var(--blue-500, #3783ff),
    var(--purple-500, #a53eff) 43%,
    var(--blue-500, #3783ff)
  ) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  filter: blur(32px) !important;
  /* Push glow downward so it “sits” under the card */
  transform: translateY(40px) scale(0.98) !important;
  transition: opacity 0.35s ease !important;
}


/* Hover: kick on the spin + glow */
.contaner-with-button:hover,
.container-with-button:hover {
  /* Bias the shadow to the bottom */
  box-shadow: 0 52px 110px -52px rgba(165, 62, 255, 0.62) !important;
  animation: neo-magic-spin 2.5s linear infinite !important;
}

.contaner-with-button:hover::before,
.container-with-button:hover::before {
  content: none !important;
}

.contaner-with-button:hover::after,
.container-with-button:hover::after {
  opacity: 1 !important;
  animation: neo-magic-spin 2.5s linear infinite !important;
}

/* ─── Hover QR popup for .download-app and .consultation ───────────────────
   Shows a QR / contact image floating above the hovered element.
   ─────────────────────────────────────────────────────────────────────────── */

.download-app,
.consultation {
  position: relative;
  display: inline-block;
}

.download-app::after,
.consultation::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);
  transform: translateY(-50%) translateX(-10px);
  /* Wide box matches the asset aspect (~landscape QR strip) so `contain` doesn’t
     letterbox huge gaps top/bottom; padding is symmetric on all sides. */
  width: 280px;
  height: 168px;
  /* Default origin is padding-box, so `contain` ignored padding — image filled the whole box.
     Content-box makes the image fit *inside* the padded area; padding shows as white. */
  background-origin: content-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 16px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}

.download-app::after {
  background-image: url('https://neocrm.2stallions.network/wp-content/uploads/2026/03/img_erweima@21.png');
}

.consultation::after {
  background-image: url('https://neocrm.2stallions.network/wp-content/uploads/2026/03/image-4-1.png');
  /* Portrait WhatsApp card — don’t reuse the landscape QR strip box (280×168) */
  width: 220px;
  height: 280px;
  padding: 14px;
}

.download-app:hover::after,
.consultation:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ─── Telephone hotline popover (.telephone) — injected into body; position set in JS
   so vertical center uses the full Elementor widget row, not only the inner .telephone node. */
.telephone {
  position: relative;
  display: inline-block;
}

.telephone-popup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 280px;
  max-width: min(340px, 85vw);
  padding: 18px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100000;
}

.telephone-popup.telephone-popup--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.telephone-popup__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.telephone-popup__svg {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  fill: var(--blue-500, #3783ff);
}

.telephone-popup__lines {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.telephone-popup__row {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--neutral-800, #364151);
}

.telephone-popup__row + .telephone-popup__row {
  margin-top: 6px;
}

.telephone-popup__label {
  font-weight: 500;
  color: var(--neutral-700, #404e64);
}

.telephone-popup__num {
  font-weight: 700;
  color: var(--blue-500, #3783ff);
  text-decoration: none;
}

.telephone-popup__num:hover,
.telephone-popup__num:focus {
  text-decoration: underline;
}