/* =================================================================
 * ZA Framework — Elementor Utilities
 *
 * These are OPT-IN classes — apply them manually via Elementor's
 * "CSS Classes" field on any widget, section, or container.
 * Nothing here is auto-injected, so Elementor Global Settings
 * for Color, Typography, Container width, Section spacing,
 * and Buttons are all fully respected.
 * ================================================================= */

/* -----------------------------------------------------------------
 * NOTE: .za-section and .za-container are defined in za-layout.css.
 * They are intentionally NOT redeclared here to avoid CSS bloat.
 * ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
 * BUTTON UTILITY
 * Apply class "za-btn" manually on a Button widget to opt into
 * theme styling. No !important — Elementor widget-level styles
 * still win if you set them directly on the widget.
 * ----------------------------------------------------------------- */
.elementor-button.za-btn {
  border-radius: 8px;
  font-weight:   500;
  line-height:   1.5;
  transition:    filter var(--za-transition-base), 
                 transform var(--za-transition-base), 
                 box-shadow var(--za-transition-base);
}

.elementor-button.za-btn:hover {
  filter:     brightness(1.08);
  transform:  translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.elementor-button.za-btn:active {
  filter:     brightness(0.95);
  transform:  translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.elementor-button.za-btn:focus-visible {
  outline:        2px solid currentColor;
  outline-offset: 2px;
}

/* Size modifier utilities */
.elementor-button.za-btn-sm { padding: 0.5rem 1rem;  font-size: 0.875rem; }
.elementor-button.za-btn-lg { padding: 1rem 2rem;    font-size: 1.125rem; }

.elementor-button.za-btn-block {
  display: block;
  width:   100%;
}

/* -----------------------------------------------------------------
 * BUTTON LOADING STATE
 * Add class "za-btn-loading" via JS when a form/action is submitting
 * ----------------------------------------------------------------- */
.elementor-button.za-btn-loading {
  position:       relative;
  color:          transparent;
  pointer-events: none;
}

.elementor-button.za-btn-loading::after {
  content:      "";
  position:     absolute;
  width:        16px;
  height:       16px;
  top:          50%;
  left:         50%;
  margin-left:  -8px;
  margin-top:   -8px;
  border:       2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #fff;
  animation:    za-spin 0.6s linear infinite;
}

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

/* -----------------------------------------------------------------
 * TEXT UTILITIES
 * Generic helpers you can apply anywhere in Elementor CSS Classes
 * ----------------------------------------------------------------- */
.za-text-balance  { text-wrap: balance; }
.za-text-pretty   { text-wrap: pretty; }
.za-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-button.za-btn-loading::after {
    animation: none;
    border-top-color: #fff;
    opacity: 0.7;
  }