/* ============================================================
   FLOW3D 2026 — BUTTONS
   /assets/css/buttons.css

   Depends on: tokens.css

   Sections:
   1.  Base Button Reset
   2.  Primary Button
   3.  Secondary Button
   4.  Ghost Button
   5.  Disabled State
   6.  Button Sizes (Small, Medium, Large)
   7.  Elementor Button Widget Overrides
   ============================================================ */


/* ------------------------------------------------------------
   1. BASE BUTTON RESET
   Shared properties across all button types.
   ------------------------------------------------------------ */

.fs-btn,
.fs-btn-primary,
.fs-btn-secondary,
.fs-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fs-button-height-md);
  padding: 0 var(--fs-button-padding-md);
  border: none;
  border-radius: var(--fs-radius);
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--fs-transition-base),
    border-color var(--fs-transition-base),
    color var(--fs-transition-base);
  white-space: nowrap;
}

.fs-btn:focus-visible,
.fs-btn-primary:focus-visible,
.fs-btn-secondary:focus-visible,
.fs-btn-ghost:focus-visible {
  outline: 2px solid var(--fs-color-primary);
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   2. PRIMARY BUTTON
   ------------------------------------------------------------ */

.fs-btn-primary,
.fs-btn {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
  border: 1px solid transparent;
}

.fs-btn-primary:hover,
.fs-btn:hover {
  background-color: var(--fs-color-primary-hover);
  color: var(--fs-color-page-bg);
  text-decoration: none;
}

.fs-btn-primary:active,
.fs-btn:active {
  background-color: var(--fs-color-dark);
}


/* ------------------------------------------------------------
   3. SECONDARY BUTTON
   ------------------------------------------------------------ */

.fs-btn-secondary {
  background-color: var(--fs-color-secondary);
  color: var(--fs-color-page-bg);
  border: 1px solid transparent;
}

.fs-btn-secondary:hover {
  background-color: var(--fs-color-secondary-hover);
  color: var(--fs-color-page-bg);
  text-decoration: none;
}

.fs-btn-secondary:active {
  background-color: var(--fs-color-primary);
}


/* ------------------------------------------------------------
   4. GHOST BUTTON
   Outlined — used for secondary actions (e.g. Back in
   multi-step forms, secondary CTAs alongside a primary).
   ------------------------------------------------------------ */

.fs-btn-ghost {
  background-color: transparent;
  color: var(--fs-color-primary);
  border: 1px solid var(--fs-color-border);
}

.fs-btn-ghost:hover {
  border-color: var(--fs-color-primary);
  color: var(--fs-color-secondary);
  text-decoration: none;
}

.fs-btn-ghost:active {
  background-color: var(--fs-color-field-bg);
}


/* ------------------------------------------------------------
   5. DISABLED STATE
   Applies to all button types.
   ------------------------------------------------------------ */

.fs-btn:disabled,
.fs-btn-primary:disabled,
.fs-btn-secondary:disabled,
.fs-btn-ghost:disabled,
.fs-btn[aria-disabled="true"],
.fs-btn-primary[aria-disabled="true"],
.fs-btn-secondary[aria-disabled="true"],
.fs-btn-ghost[aria-disabled="true"] {
  background-color: var(--fs-color-disabled);
  color: var(--fs-color-page-bg);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}


/* ------------------------------------------------------------
   6. BUTTON SIZES
   Default is medium. Add size modifier class as needed.
   ------------------------------------------------------------ */

/* Small */
.fs-btn-sm {
  height: var(--fs-button-height-sm);
  padding: 0 var(--fs-button-padding-sm);
  font-size: var(--fs-font-size-sm);
}

/* Medium — default, no modifier needed */
.fs-btn-md {
  height: var(--fs-button-height-md);
  padding: 0 var(--fs-button-padding-md);
  font-size: var(--fs-font-size-base);
}

/* Large */
.fs-btn-lg {
  height: var(--fs-button-height-lg);
  padding: 0 var(--fs-button-padding-lg);
  font-size: var(--fs-font-size-base);
}


/* ------------------------------------------------------------
   7. ELEMENTOR BUTTON WIDGET OVERRIDES
   Maps Elementor's button widget output to FS design tokens.
   Elementor renders buttons as .elementor-button — these
   rules ensure widget buttons match the design system without
   requiring manual styling on every widget instance.
   ------------------------------------------------------------ */

/* Base Elementor button */
.elementor-button,
.elementor-button-wrapper .elementor-button {
  height: var(--fs-button-height-md);
  padding: 0 var(--fs-button-padding-md);
  border-radius: var(--fs-radius);
  font-family: var(--fs-font);
  font-size: var(--fs-font-size-base);
  font-weight: var(--fs-font-weight-bold);
  transition:
    background-color var(--fs-transition-base),
    border-color var(--fs-transition-base),
    color var(--fs-transition-base);
}

/* Elementor primary button (type="button" default) */
.elementor-button.elementor-button-default,
.elementor-button:not([class*="elementor-button-"]) {
  background-color: var(--fs-color-primary);
  color: var(--fs-color-page-bg);
}

.elementor-button.elementor-button-default:hover,
.elementor-button:not([class*="elementor-button-"]):hover {
  background-color: var(--fs-color-primary-hover);
  color: var(--fs-color-page-bg);
}

/* Elementor secondary style */
.elementor-button.elementor-button-info {
  background-color: var(--fs-color-secondary);
  color: var(--fs-color-page-bg);
}

.elementor-button.elementor-button-info:hover {
  background-color: var(--fs-color-secondary-hover);
  color: var(--fs-color-page-bg);
}

/* Elementor ghost / outline style */
.elementor-button.elementor-button-ghost {
  background-color: transparent;
  color: var(--fs-color-primary);
  border: 1px solid var(--fs-color-border);
}

.elementor-button.elementor-button-ghost:hover {
  border-color: var(--fs-color-primary);
  color: var(--fs-color-secondary);
}

/* Elementor button sizes */
.elementor-button.elementor-size-sm {
  height: var(--fs-button-height-sm);
  padding: 0 var(--fs-button-padding-sm);
  font-size: var(--fs-font-size-sm);
}

.elementor-button.elementor-size-md {
  height: var(--fs-button-height-md);
  padding: 0 var(--fs-button-padding-md);
}

.elementor-button.elementor-size-lg {
  height: var(--fs-button-height-lg);
  padding: 0 var(--fs-button-padding-lg);
}

/* Focus state */
.elementor-button:focus-visible {
  outline: 2px solid var(--fs-color-primary);
  outline-offset: 3px;
}