/* Base styles applied to ALL button classes below */
:is(.btn, .btn-primary, .btn-secondary, .forminator-button){
  --_h: var(--btn-h);
  --_px: var(--btn-px);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height: var(--_h);
  padding: 0 var(--_px);
  border-radius: var(--btn-radius)!important; 

  font: 700 14px/1 Inter, system-ui, sans-serif!important; 
; 
  text-decoration:none;

  border:1px solid transparent!important; 
;
  background:transparent;
  color: var(--brand-ink);

  transition: background-color .18s, color .18s,
              border-color .18s, box-shadow .18s, transform .08s;
  cursor:pointer;
  box-shadow:none;
}
.cta-highlight a{
  color: var(--brand);
  background:#fff;
  border-color: color-mix(in srgb, var(--brand) 50%, rgba(0,0,0,.12));
  opacity: 80%;
  padding: 2px 2px;
  border-radius: 5px;
  font-size: 20px;
}

/* Interactions shared by all buttons */
:is(.btn, .btn-primary, .btn-secondary):hover{ transform: translateY(-1px); }
:is(.btn, .btn-primary, .btn-secondary):active{ transform: translateY(0); }
:is(.btn, .btn-primary, .btn-secondary):focus-visible{ outline:none; box-shadow: var(--ring); }

:is(.btn, .btn-primary, .btn-secondary)[disabled],
:is(.btn, .btn-primary, .btn-secondary).is-disabled,
:is(.btn, .btn-primary, .btn-secondary)[aria-disabled="true"]{
  opacity:.55; pointer-events:none; cursor:not-allowed;
}

/* Optional icon helpers */
:is(.btn, .btn-primary, .btn-secondary) .icon{ width:1.1em; height:1.1em; display:inline-block; }
.icon-left{ margin-right:6px; } .icon-right{ margin-left:6px; }

/* ===== Variant: Primary (solid brand fill) ===== */
.forminator-button, .btn-primary{
  color:#fff;
  border-color: transparent;
  background: var(--brand);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}


.forminator-button:hover, .btn-primary:hover{
  background: color-mix(in srgb, var(--brand) 90%, black 10%);
  box-shadow: 0 4px 8px rgba(0,0,0,.16);
}
.forminator-butto:active, .btn-primary:active{
  background: color-mix(in srgb, var(--brand) 80%, black 20%);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

/* ===== Variant: Secondary (white fill + brand border) ===== */
.btn-secondary{
  color: var(--brand);
  background:#fff;
  border-color: color-mix(in srgb, var(--brand) 50%, rgba(0,0,0,.12));
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.btn-secondary:hover{
  background: color-mix(in srgb, var(--brand) 6%, #fff);
  border-color: color-mix(in srgb, var(--brand) 70%, rgba(0,0,0,.14));
  color: var(--brand);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.btn-secondary:active{
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ===== Sizes (optional) ===== */
.btn-sm, .btn-primary.btn-sm, .btn-secondary.btn-sm{
  --_h: 34px; --_px: 14px; font-weight:600; font-size:13px; border-radius:10px;
}
.btn-lg, .btn-primary.btn-lg, .btn-secondary.btn-lg{
  --_h: 48px; --_px: 22px; font-weight:800; font-size:15px;
}

/* Block width (optional) */
.btn-block, .btn-primary.btn-block, .btn-secondary.btn-block{ width:100%; display:inline-flex; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  :is(.btn, .btn-primary, .btn-secondary){ transition:none; }
}
/* ===== Variant: Primary (solid brand fill) ===== */
.btn-primary{
  color: #fff;
  border-color: transparent;
  background: var(--brand);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

.btn-primary:hover{
  color: #fff; /* keep white, stops "blue link" issue */
  background: color-mix(in srgb, var(--brand) 90%, black 10%);
  box-shadow: 0 4px 8px rgba(0,0,0,.16);
}

.btn-primary:active{
  color: #fff; /* lock color */
  background: color-mix(in srgb, var(--brand) 80%, black 20%);
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

.btn.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;   /* allow hover */

}