/* Orion Elementor Widgets - CSS using Elementor Global Colors when available
   Falls back to hard-coded colors if global vars are not present */

/* Set component-level defaults using the mapped vars above.
   These CSS variables can still be overridden per-widget via selectors (Elementor) or inline vars. */
.orion-btn {
  --orion-btn-bg: var(--orion-global-primary);
  --orion-btn-text: var(--orion-global-on-primary);
  --orion-btn-border: transparent;
  --orion-btn-hover-bg: color-mix(in srgb, var(--orion-btn-bg, var(--orion-global-primary)) 85%, #000 15%);
  --orion-btn-hover-text: var(--orion-btn-text, var(--orion-global-on-primary));
  --orion-btn-accent: var(--orion-global-accent);
  font-family: "Montserrat", Sans-serif;
}

/* Base button */
.orion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: 999px; /* pill */
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--orion-btn-border, transparent);
  color: var(--orion-btn-text);
  background-color: var(--orion-btn-bg);
  transition: background-color .15s ease, color .15s ease, transform .06s ease;
  line-height: 1;
  transition: all 200ms ease;
}

/* Sizes */
.orion-btn--sm { padding: 0.35rem 0.9rem; font-size: 0.9rem; }
.orion-btn--md { padding: 0.6rem 1.4rem; font-size: 1rem; }
.orion-btn--lg { padding: 0.9rem 1.8rem; font-size: 1.125rem; }

/* ICON & SVG HANDLING */

/* Base color for icon containers (font icons or wrappers) */
.orion-btn__icon,
.orion-btn__icon-wrapper {
  color: var(--orion-btn-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  transition: all 200ms ease;
}

/* If the SVG element itself carries the class (e.g. <svg class="orion-btn__icon">),
   make sure we apply the same rules to it */
svg.orion-btn__icon,
svg.orion-btn__icon-wrapper,
.orion-btn__icon svg,
.orion-btn__icon-wrapper svg,
.orion-btn svg.e-font-icon-svg,
.orion-btn .e-font-icon-svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor !important;   /* prefer currentColor so svg follows the .orion-btn__icon color */
  stroke: none !important;
  overflow: visible;
}

/* Some SVGs include inline fill/stroke attributes on children (<path>, <circle> etc).
   Override them to currentColor so they follow the CSS color. */
.orion-btn__icon svg path,
.orion-btn__icon svg circle,
.orion-btn__icon svg rect,
.orion-btn__icon svg line,
.orion-btn__icon svg polygon,
svg.orion-btn__icon path,
svg.orion-btn__icon circle,
svg.orion-btn__icon rect,
svg.orion-btn__icon line,
svg.orion-btn__icon polygon,
.orion-btn svg.e-font-icon-svg path,
.orion-btn svg.e-font-icon-svg circle,
.orion-btn svg.e-font-icon-svg rect,
.orion-btn svg.e-font-icon-svg line,
.orion-btn svg.e-font-icon-svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* If icon is a font-icon <i> or pseudo-element, color works via color property already */
.orion-btn__icon i,
.orion-btn__icon::before,
.orion-btn__icon-wrapper i,
.orion-btn__icon-wrapper::before {
  color: var(--orion-btn-accent);
}

/* Ensure icon gets correct margin in left/right positions (explicit fallbacks for older browsers) */
.orion-btn--has-icon.orion-btn--icon-left .orion-btn__icon,
.orion-btn--has-icon.orion-btn--icon-left .orion-btn__icon-wrapper { margin-right: 0.5rem; }
.orion-btn--has-icon.orion-btn--icon-right .orion-btn__icon,
.orion-btn--has-icon.orion-btn--icon-right .orion-btn__icon-wrapper { margin-left: 0.5rem; }

/* If icon is inline SVG without wrapper and appears immediately after text node,
   ensure spacing still works (some browsers collapse gap). These rules help. */
.orion-btn > svg.orion-btn__icon { margin-left: 0; }
.orion-btn > svg.orion-btn__icon:first-child { margin-left: 0; margin-right: 0.5rem; }

/* VARIANTS */

/* 1) Filled (dark) */
.orion-btn--filled {
  --orion-btn-bg: var(--orion-global-primary);
  --orion-btn-border: var(--orion-global-primary);
  --orion-btn-text: var(--orion-global-on-primary);
  --orion-btn-hover-bg: color-mix(in srgb, var(--orion-btn-bg) 85%, #000 15%);
  --orion-btn-hover-text: var(--orion-btn-text);
  --orion-btn-accent: var(--orion-global-accent);
}

/* 2) Filled-alt (slightly different tone/padding) */
.orion-btn--filled-alt {
  --orion-btn-bg: color-mix(in srgb, var(--orion-global-primary) 90%, #fff 10%);
  --orion-btn-border: var(--orion-global-primary);
  --orion-btn-text: var(--orion-global-on-primary);
  --orion-btn-hover-bg: color-mix(in srgb, var(--orion-btn-bg) 85%, #000 15%);
  --orion-btn-accent: var(--orion-global-accent);
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}

/* 3) Light filled (jasne tło) */
.orion-btn--light {
  --orion-btn-bg: var(--orion-global-light-bg);
  --orion-btn-border: transparent;
  --orion-btn-text: var(--e-global-color-primary, #0b4b6c); /* fallback to specific blue if available */
  --orion-btn-hover-bg: color-mix(in srgb, var(--orion-btn-bg) 85%, #000 15%);
  --orion-btn-accent: var(--orion-global-accent);
  color: var(--orion-btn-text);
}

/* 4) Outline (blue border) */
.orion-btn--outline {
  --orion-btn-bg: transparent;
  --orion-btn-border: var(--orion-global-secondary);
  --orion-btn-text: var(--orion-global-secondary);
  --orion-btn-hover-bg: rgba(11,110,160,0.08);
  --orion-btn-hover-text: var(--orion-global-secondary);
  --orion-btn-accent: var(--orion-global-accent);
}

/* 5) Outline-inverse (white border, used on dark surfaces) */
.orion-btn--outline-inverse {
  --orion-btn-bg: transparent;
  --orion-btn-border: var(--e-global-color-white, #ffffff);
  --orion-btn-text: var(--e-global-color-white, #ffffff);
  --orion-btn-hover-bg: rgba(255,255,255,0.06);
  --orion-btn-hover-text: var(--e-global-color-white, #ffffff);
  --orion-btn-accent: var(--e-global-color-white, #ffffff);
}

/* 6) Text-only (link-like) */
.orion-btn--text {
  --orion-btn-bg: transparent;
  --orion-btn-border: transparent;
  --orion-btn-text: var(--orion-global-secondary);
  --orion-btn-hover-bg: transparent;
  --orion-btn-hover-text: var(--orion-global-secondary);
  --orion-btn-accent: var(--orion-global-accent);
  padding: 0; /* text-only has minimal padding */
  border-radius: 0;
  font-weight: 600;
}

/* Hover & focus states (use variables or fallbacks) */
.orion-btn:hover,
.orion-btn:focus {
  background-color: var(--orion-btn-hover-bg, var(--orion-btn-bg));
  color: var(--orion-btn-hover-text, var(--orion-btn-text));
  text-decoration: none;
}

.orion-btn:hover .orion-btn__icon-wrapper {
  transform:  translateX(2px);
}

/* For outline-inverse ensure border visible on dark wrapper backgrounds */
.orion-btn--outline-inverse {
  box-shadow: none;
}

.orion-btn--has-icon .orion-btn__text {
  transform: translateY(-2px);
  display: inline-block;
}

/* Small responsive tweaks */
@media (max-width: 480px) {
  .orion-btn--md { padding-left: 1rem; padding-right: 1rem; }
  .orion-btn--lg { padding-left: 1.1rem; padding-right: 1.1rem; }
}