/**
 * Elcogen Button Widget Styles
 *
 * Complete button system with exact Figma design tokens
 * Variants: Primary, Secondary, Neutral, Danger
 * Sizes: Large, Medium, Small
 * States: Default, Hover, Active, Focus, Disabled, Selected
 *
 * Fallback values ensure correct display when design-tokens.css
 * has not been generated yet.
 *
 * @package Elcogen_Elementor_Widgets
 * @version 2.1.0
 */

/* ========================================
   Button Widget - Uses Global Design Tokens
   ======================================== */

/* ========================================
   Base Button Styles
   ======================================== */

.elcogen-button-wrapper {
  display: block;
}

.elcogen-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-body, 'Afacad', sans-serif);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: none;
  text-align: center;
  border-style: solid;
  cursor: pointer;
  transition: var(--transition-all, all 0.3s ease);
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  outline: none;
  border-radius: var(--radius-pill, 22.5rem);
}
a.elcogen-button {
  white-space: nowrap;
  gap: var(--spacing-baseline-08);
}

/* Button text wrapper */
.elcogen-button__text {
  display: inline-block;
  white-space: nowrap;
}

/* Icon containers */
.elcogen-button__icon-before,
.elcogen-button__icon-after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.elcogen-button__icon-before svg,
.elcogen-button__icon-after svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Force all SVG child elements to inherit text color,
   overriding any hardcoded fill attributes in uploaded SVGs */
.elcogen-button__icon-before svg *,
.elcogen-button__icon-after svg * {
  fill: currentColor !important;
}

/* ========================================
   Button Sizes - ALL VARIANTS
   ======================================== */

/* Large Size */
.elcogen-button--large {
  padding: 0.625rem 1.875rem;
  font-size: var(--font-size-body-large, 1.3125rem);
  line-height: var(--line-height-body-large, 2.4375rem);
  gap: var(--spacing-baseline-04, 0.25rem);
  border-width: var(--button-border-width, 2px);
}

/* Medium Size */
.elcogen-button--medium {
  padding: var(--elcogen-button-padding-md, 0.375rem 1.25rem);
  font-size: var(--elcogen-button-font-size-md, 1.125rem);
  line-height: var(--line-height-body-medium, 1.75rem);
  gap: 0;
  border-width: var(--button-border-width, 2px);
}

/* Small Size */
.elcogen-button--small {
  padding: 0.125rem 0.875rem;
  font-size: var(--font-size-body-base, 1rem);
  line-height: var(--line-height-body-base, 1.5rem);
  gap: 0.125rem;
  border-width: var(--button-border-width, 2px);
}

/* ========================================
   Icon Only Mode
   ======================================== */

.elcogen-button--icon-only {
  gap: 0;
  border-radius: 50%;
}

/* Icon Only - Large */
.elcogen-button--icon-only.elcogen-button--large {
  width: 3rem;
  height: 3rem;
  padding: 0;
}

/* Icon Only - Medium */
.elcogen-button--icon-only.elcogen-button--medium {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

/* Icon Only - Small */
.elcogen-button--icon-only.elcogen-button--small {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* Hide text visually but keep for screen readers */
.elcogen-button--icon-only .elcogen-button__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Full Width */
.elcogen-button--full-width {
  width: 100%;
  display: flex;
}

/* ========================================
   PRIMARY VARIANT
   ======================================== */

/* Primary - Default State */
.elcogen-button--primary {
  background-color: var(--color-theme-primary-background-default, #1E1C25);
  color: var(--color-theme-primary-text-default, #FFFFFF);
  border-color: var(--color-theme-primary-border-default, #1E1C25);
}

/* Primary - Hover State */
.elcogen-button--primary:hover:not(:disabled) {
  background-color: var(--color-theme-primary-background-hover, #0C28C4);
  color: var(--color-theme-primary-text-hover, #FFFFFF);
  border-color: var(--color-theme-primary-border-hover, #0C28C4);
  transform: translateY(-0.125rem);
}

/* Primary - Active State */
.elcogen-button--primary:active:not(:disabled) {
  background-color: var(--color-theme-primary-background-active, #1E1C25);
  color: var(--color-theme-primary-text-active, #FFFFFF);
  border-color: var(--color-theme-primary-border-active, #1E1C25);
}

/* Primary - Focus State */
.elcogen-button--primary:focus-visible {
  background-color: var(--color-theme-primary-background-default, #1E1C25);
  color: var(--color-theme-primary-text-default, #FFFFFF);
  border-color: var(--color-theme-primary-border-default, #1E1C25);
  outline: var(--focus-outline-width, 0.125rem) solid var(--color-outer-color, #0092C1);
  outline-offset: var(--focus-outline-offset, 0.125rem);
}

/* Primary - Disabled State */
.elcogen-button--primary:disabled,
.elcogen-button--primary[disabled] {
  background-color: var(--color-background-light, #F2F1F2);
  color: var(--color-neutral-300, #C2C0C9);
  border-color: var(--color-background-light, #F2F1F2);
  cursor: not-allowed;
}

/* ========================================
   SECONDARY VARIANT
   ======================================== */

/* Secondary - Default State */
.elcogen-button--secondary {
  background-color: var(--color-theme-secondary-background-default, transparent);
  color: var(--color-theme-secondary-text-default, #1E1C25);
  border-color: var(--color-theme-secondary-border-default, #1E1C25);
}

/* Secondary - Hover State */
.elcogen-button--secondary:hover:not(:disabled) {
  background-color: var(--color-cobalt-blue-400, #0C28C4);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-cobalt-blue-400, #0C28C4);
  transform: translateY(-0.125rem);
}

/* Secondary - Active State */
.elcogen-button--secondary:active:not(:disabled) {
  background-color: var(--color-light-blue-200, #CCF3FF);
  color: var(--color-dark-neutral, #1E1C25);
  border-color: var(--color-dark-neutral, #1E1C25);
}

/* Secondary - Focus State */
.elcogen-button--secondary:focus-visible {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-dark-neutral, #1E1C25);
  border-color: var(--color-dark-neutral, #1E1C25);
  outline: var(--focus-outline-width, 0.125rem) solid var(--color-outer-color, #0092C1);
  outline-offset: var(--focus-outline-offset, 0.125rem);
}

/* Secondary - Selected State */
.elcogen-button--secondary.elcogen-button--selected {
  background-color: var(--color-neutral-200, #C2C0C9);
  color: var(--color-dark-neutral, #1E1C25);
  border-color: var(--color-dark-neutral, #1E1C25);
}

/* Secondary - Disabled State */
.elcogen-button--secondary:disabled,
.elcogen-button--secondary[disabled] {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-neutral-300, #C2C0C9);
  border-color: var(--color-neutral-300, #C2C0C9);
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL VARIANT
   ======================================== */

/* Neutral - Default State */
.elcogen-button--neutral {
  background-color: var(--color-theme-neutral-background-default, transparent);
  color: var(--color-theme-neutral-text-default, #1E1C25);
  border-color: var(--color-theme-neutral-border-default, transparent);
  border-width: 0;
}

/* Neutral - Hover State */
.elcogen-button--neutral:hover:not(:disabled) {
  background-color: transparent;
  color: var(--color-cobalt-blue-400, #0C28C4);
  border-color: transparent;
  transform: translateY(-0.125rem);
}

/* Neutral - Active State */
.elcogen-button--neutral:active:not(:disabled) {
  background-color: transparent;
  color: var(--color-theme-neutral-text-default, #1E1C25);
  border-color: transparent;
}

/* Neutral - Focus State */
.elcogen-button--neutral:focus-visible {
  background-color: transparent;
  color: var(--color-theme-neutral-text-default, #1E1C25);
  border: 1px solid var(--color-white, #FFFFFF);
  outline: var(--focus-outline-width, 0.125rem) solid var(--color-outer-color, #0092C1);
  outline-offset: var(--focus-outline-offset, 0.125rem);
}

/* Neutral - Disabled State */
.elcogen-button--neutral:disabled,
.elcogen-button--neutral[disabled] {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-neutral-300, #C2C0C9);
  border-color: var(--color-white, #FFFFFF);
  cursor: not-allowed;
}

/* ========================================
   NEUTRAL SIZE EXCEPTION - Zero Horizontal Padding
   ======================================== */

/* Neutral Large - Zero Horizontal Padding */
.elcogen-button--neutral.elcogen-button--large {
  padding: 0.625rem 0;
}

/* Neutral Medium - Zero Horizontal Padding */
.elcogen-button--neutral.elcogen-button--medium {
  padding: 0.375rem 0;
}

/* Neutral Small - Zero Horizontal Padding */
.elcogen-button--neutral.elcogen-button--small {
  padding: 0.125rem 0;
}

/* ========================================
   ACCENT VARIANT
   ======================================== */

/* Accent - Default State */
.elcogen-button--accent {
  background-color: var(--color-cobalt-blue-400, #0C28C4);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-cobalt-blue-400, #0C28C4);
}

/* Accent - Hover State */
.elcogen-button--accent:hover:not(:disabled) {
  background-color: var(--color-cobalt-blue-500, #081C89);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-cobalt-blue-500, #081C89);
  transform: translateY(-0.125rem);
}

/* Accent - Active State */
.elcogen-button--accent:active:not(:disabled) {
  background-color: var(--color-cobalt-blue-400, #0C28C4);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-cobalt-blue-400, #0C28C4);
}

/* Accent - Focus State */
.elcogen-button--accent:focus-visible {
  background-color: var(--color-cobalt-blue-400, #0C28C4);
  color: var(--color-white, #FFFFFF);
  border-color: var(--color-cobalt-blue-400, #0C28C4);
  outline: var(--focus-outline-width, 0.125rem) solid var(--color-outer-color, #0092C1);
  outline-offset: var(--focus-outline-offset, 0.125rem);
}

/* Accent - Disabled State */
.elcogen-button--accent:disabled,
.elcogen-button--accent[disabled] {
  background-color: var(--color-background-light, #F2F1F2);
  color: var(--color-neutral-300, #C2C0C9);
  border-color: var(--color-background-light, #F2F1F2);
  cursor: not-allowed;
}

/* ========================================
   DANGER VARIANT
   ======================================== */

/* Danger - Default State */
.elcogen-button--danger {
  background-color: var(--color-theme-danger-background-default, #D74B3E);
  color: var(--color-theme-danger-text-default, #FFFFFF);
  border-color: var(--color-theme-danger-border-default, #D74B3E);
}

/* Danger - Hover State */
.elcogen-button--danger:hover:not(:disabled) {
  background-color: #ac3c32;
  color: #FFFFFF;
  border-color: #ac3c32;
  transform: translateY(-0.125rem);
}

/* Danger - Active State */
.elcogen-button--danger:active:not(:disabled) {
  background-color: #812d25;
  color: #FFFFFF;
  border-color: #812d25;
}

/* Danger - Focus State */
.elcogen-button--danger:focus-visible {
  background-color: var(--color-theme-danger-background-default, #D74B3E);
  color: var(--color-theme-danger-text-default, #FFFFFF);
  border-color: var(--color-theme-danger-border-default, #D74B3E);
  outline: var(--focus-outline-width, 0.125rem) solid var(--color-outer-color, #0092C1);
  outline-offset: var(--focus-outline-offset, 0.125rem);
}

/* Danger - Disabled State */
.elcogen-button--danger:disabled,
.elcogen-button--danger[disabled] {
  background-color: var(--color-background-light, #F2F1F2);
  color: var(--color-neutral-300, #C2C0C9);
  border-color: var(--color-background-light, #F2F1F2);
  cursor: not-allowed;
}

/* ========================================
   Loading State
   ======================================== */

.elcogen-button--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.elcogen-button--loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: elcogen-button-spin 0.6s linear infinite;
}

/* Loading spinner colors per variant */
.elcogen-button--primary.elcogen-button--loading::after,
.elcogen-button--danger.elcogen-button--loading::after {
  border-color: var(--color-theme-primary-text-default, #FFFFFF);
  border-top-color: transparent;
}

.elcogen-button--secondary.elcogen-button--loading::after {
  border-color: var(--color-theme-secondary-text-default, #1E1C25);
  border-top-color: transparent;
}

.elcogen-button--neutral.elcogen-button--loading::after {
  border-color: var(--color-theme-neutral-text-default, #1E1C25);
  border-top-color: transparent;
}

@keyframes elcogen-button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   Icon Padding Adjustments
   ======================================== */



/* ========================================
   Accessibility Enhancements
   ======================================== */

/* Remove focus outline for mouse users */
.elcogen-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 767px) {
  /* Maintain same sizes on mobile as desktop per Figma specs */
  /* Sizes remain unchanged */
}

/* ========================================
   Motion Preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .elcogen-button {
    transition: none;
  }

  @keyframes elcogen-button-spin {
    to {
      transform: none;
    }
  }
}

/* ========================================
   High Contrast Mode Support
   ======================================== */

@media (prefers-contrast: high) {
  .elcogen-button {
    border-width: 3px;
  }

  .elcogen-button:focus-visible {
    box-shadow:
      0 0 0 0.25rem var(--elcogen-button-focus-ring-outer),
      0 0 0 0.125rem var(--elcogen-button-focus-ring-inner);
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .elcogen-button {
    border: 1px solid #000 !important;
    background: none !important;
    color: #000 !important;
    text-decoration: underline;
    box-shadow: none !important;
  }
}