/*
 * EcomPL Buttons — canonical button system.
 *
 * THREE variants, fixed heights, consistent radius.
 * Use these classes on any <button> or <a> element across ALL module pages.
 * Do NOT define additional button heights or border-radii in module CSS files.
 *
 * Spec: UX specification §2.2 Button Component
 * Depends on: design-tokens.css (must be loaded first)
 */

/* ── Primary CTA ─────────────────────────────────────────────────────────────
 * 48px · pill radius · green bg · dark text · bold
 * Use for: main page action, upgrade prompt, form submit
 */
.ecom-pl-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--epl-btn-h-primary);
	padding: 0 28px;
	background: var(--epl-secondary);
	color: var(--epl-dark);
	border: none;
	border-radius: var(--epl-radius-pill);
	font-family: var(--epl-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s, box-shadow .2s;
}

.ecom-pl-btn-primary:hover  {
	background: var(--epl-secondary-600);
	color: var(--epl-dark);
}
.ecom-pl-btn-primary:focus-visible { outline: none; box-shadow: var(--epl-focus-ring); }
.ecom-pl-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* Full-width modifier */
.ecom-pl-btn-primary--full { width: 100%; }

/*
 * Theme / WordPress global link styles often set a:hover { color: accent } on all <a>.
 * Button-shaped links must keep explicit foreground colors on every pseudo-state.
 */
.ecom-pl-app a.ecom-pl-btn-primary:link,
.ecom-pl-app a.ecom-pl-btn-primary:visited,
.ecom-pl-app a.ecom-pl-btn-primary:hover,
.ecom-pl-app a.ecom-pl-btn-primary:active,
.ecom-pl-app a.ecom-pl-btn-primary:focus {
	color: var(--epl-dark);
	text-decoration: none;
}

/* ── Secondary ───────────────────────────────────────────────────────────────
 * 40px · 8px radius · outlined · dark text
 * Use for: cancel, back, secondary action alongside a primary
 */
.ecom-pl-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--epl-btn-h-secondary);
	padding: 0 20px;
	background: var(--epl-surface);
	color: var(--epl-text);
	border: 1px solid var(--epl-border);
	border-radius: var(--epl-radius-input);
	font-family: var(--epl-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .2s, background .2s;
}

.ecom-pl-btn-secondary:hover  { border-color: var(--epl-border-strong); background: var(--epl-bg); color: var(--epl-text); }
.ecom-pl-btn-secondary:focus-visible { outline: none; box-shadow: var(--epl-focus-ring); }
.ecom-pl-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }

.ecom-pl-app a.ecom-pl-btn-secondary:link,
.ecom-pl-app a.ecom-pl-btn-secondary:visited,
.ecom-pl-app a.ecom-pl-btn-secondary:hover,
.ecom-pl-app a.ecom-pl-btn-secondary:active,
.ecom-pl-app a.ecom-pl-btn-secondary:focus {
	color: var(--epl-text);
	text-decoration: none;
}

/* ── Ghost ───────────────────────────────────────────────────────────────────
 * 36px · 8px radius · transparent · muted text
 * Use for: tertiary actions, filter chips, icon-adjacent labels
 */
.ecom-pl-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--epl-btn-h-ghost);
	padding: 0 16px;
	background: transparent;
	color: var(--epl-text-secondary);
	border: 1px solid var(--epl-border);
	border-radius: var(--epl-radius-input);
	font-family: var(--epl-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s, color .2s;
}

.ecom-pl-btn-ghost:hover  { background: var(--epl-bg); color: var(--epl-text); }
.ecom-pl-btn-ghost:focus-visible { outline: none; box-shadow: var(--epl-focus-ring); }
.ecom-pl-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

.ecom-pl-app a.ecom-pl-btn-ghost:link,
.ecom-pl-app a.ecom-pl-btn-ghost:visited,
.ecom-pl-app a.ecom-pl-btn-ghost:hover,
.ecom-pl-app a.ecom-pl-btn-ghost:active,
.ecom-pl-app a.ecom-pl-btn-ghost:focus {
	color: var(--epl-text-secondary);
	text-decoration: none;
}

.ecom-pl-app a.ecom-pl-btn-ghost:hover,
.ecom-pl-app a.ecom-pl-btn-ghost:focus {
	color: var(--epl-text);
}

/* ── Danger ──────────────────────────────────────────────────────────────────
 * 40px · 8px radius · red outlined
 * Use for: destructive actions (cancel account, delete)
 */
.ecom-pl-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--epl-btn-h-secondary);
	padding: 0 20px;
	background: transparent;
	color: var(--epl-danger);
	border: 1px solid var(--epl-danger);
	border-radius: var(--epl-radius-input);
	font-family: var(--epl-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.ecom-pl-btn-danger:hover  { background: var(--epl-danger); color: var(--epl-text-on-primary); }
.ecom-pl-btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(239 68 68 / 30%); }
.ecom-pl-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

.ecom-pl-app a.ecom-pl-btn-danger:link,
.ecom-pl-app a.ecom-pl-btn-danger:visited {
	color: var(--epl-danger);
	text-decoration: none;
}

.ecom-pl-app a.ecom-pl-btn-danger:hover,
.ecom-pl-app a.ecom-pl-btn-danger:active,
.ecom-pl-app a.ecom-pl-btn-danger:focus {
	color: var(--epl-text-on-primary);
	text-decoration: none;
}