/* ===========================================================
   buttons.css
   =========================================================== */

.btn {
	--btn-bg:     transparent;
	--btn-fg:     var(--vc-fg);
	--btn-border: var(--vc-line);
	--btn-pad-y:  12px;
	--btn-pad-x:  20px;
	--btn-fz:     var(--vc-text-sm);

	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: var(--btn-pad-y) var(--btn-pad-x);
	background: var(--btn-bg); color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: 999px;
	font-family: var(--vc-font-display);
	font-size: var(--btn-fz); font-weight: 500;
	letter-spacing: -.005em;
	cursor: pointer; user-select: none;
	min-height: 44px; min-width: 44px;
	transition: background var(--vc-dur) var(--vc-ease), color var(--vc-dur) var(--vc-ease), border-color var(--vc-dur) var(--vc-ease), transform var(--vc-dur) var(--vc-ease);
	position: relative; overflow: hidden;
	text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn span { position: relative; z-index: 1; }

.btn--primary {
	--btn-bg: var(--vc-accent);
	--btn-fg: #fff;
	--btn-border: var(--vc-accent);
}
.btn--primary:hover { --btn-bg: #6B47F5; --btn-border: #6B47F5; color: #fff; }

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--vc-fg);
	--btn-border: var(--vc-line-strong);
}
.btn--ghost:hover { --btn-bg: rgba(255,255,255,.04); --btn-border: var(--vc-fg); color: var(--vc-fg); }

.btn--small  { --btn-pad-y: 8px;  --btn-pad-x: 14px; --btn-fz: var(--vc-text-xs); min-height: 36px; }
.btn--large  { --btn-pad-y: 16px; --btn-pad-x: 28px; --btn-fz: var(--vc-text-md); min-height: 52px; }
.btn--xl     { --btn-pad-y: 20px; --btn-pad-x: 36px; --btn-fz: var(--vc-text-lg); min-height: 64px; font-weight: 600; }

/* Loading state */
.btn .btn__loading { display: none; }
.btn.is-loading .btn__label { opacity: 0; }
.btn.is-loading .btn__loading { display: inline-block; position: absolute; left: 0; right: 0; }
.btn.is-loading { pointer-events: none; }

/* Disabled */
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }