/**
 * Signal Pack Global Components — Button System
 * Uses existing brand CSS variables with safe fallbacks (same pattern
 * as mega-menu.css / footer.css — does not redefine the variables,
 * just falls back to the approved values if they aren't found).
 */

.spgc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 6px;
	height: 44px;
	padding: 0 26px;
	border: 2px solid transparent;
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.spgc-btn:disabled,
.spgc-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
.spgc-btn:focus-visible {
	outline: 2px solid var(--navy, #2C2A78);
	outline-offset: 3px;
}

/* ---------- Variants ---------- */

/* Primary — Signal Pack Red: Shop Now, Add to Cart, Submit, Send Enquiry, Request Quote, Proceed */
.spgc-btn-primary {
	background: var(--red, #E31E2A);
	color: #fff;
	border-color: var(--red, #E31E2A);
}
.spgc-btn-primary:hover { background: #c8151f; border-color: #c8151f; }
.spgc-btn-primary:active { background: #a91119; border-color: #a91119; }
.spgc-btn-primary:focus-visible { outline-color: var(--ink, #17162e); }

/* Secondary — Signal Pack Blue: View Products, Learn More, View Details, My Account */
.spgc-btn-secondary {
	background: var(--navy, #2C2A78);
	color: #fff;
	border-color: var(--navy, #2C2A78);
}
.spgc-btn-secondary:hover { background: var(--red, #E31E2A); border-color: var(--red, #E31E2A); }
.spgc-btn-secondary:active { background: #c8151f; border-color: #c8151f; }

/* Outline — white/transparent background, Signal Pack Blue border */
.spgc-btn-outline {
	background: transparent;
	color: var(--navy, #2C2A78);
	border-color: var(--navy, #2C2A78);
}
.spgc-btn-outline:hover { background: var(--navy, #2C2A78); color: #fff; }
.spgc-btn-outline.spgc-on-dark { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.spgc-btn-outline.spgc-on-dark:hover { background: #fff; color: var(--navy, #2C2A78); border-color: #fff; }

/* Text — low-priority actions: View All, Read More, Remove, Edit */
.spgc-btn-text {
	background: none;
	border: none;
	color: var(--navy, #2C2A78);
	height: auto;
	padding: 4px 2px;
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0;
}
.spgc-btn-text:hover { color: var(--red, #E31E2A); text-decoration: underline; }

/* WhatsApp — keeps WhatsApp's own colour for recognisability, Signal Pack shape/type */
.spgc-btn-whatsapp {
	background: #25D366;
	color: #fff;
	border-color: #25D366;
}
.spgc-btn-whatsapp:hover { background: #1ebc59; border-color: #1ebc59; }
.spgc-btn-whatsapp svg { width: 16px; height: 16px; fill: #fff; }

/* ---------- Sizes ---------- */
.spgc-btn-sm { height: 34px; padding: 0 16px; font-size: 11px; }
.spgc-btn-md { height: 44px; padding: 0 26px; }
.spgc-btn-lg { height: 52px; padding: 0 32px; font-size: 13.5px; }
.spgc-btn-full { width: 100%; }

/* ---------- Loading state (toggle via JS: add/remove "spgc-is-loading") ---------- */
.spgc-btn.spgc-is-loading {
	color: transparent !important;
	position: relative;
	pointer-events: none;
}
.spgc-btn.spgc-is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: spgc-spin 0.7s linear infinite;
}
.spgc-btn-outline.spgc-is-loading::after,
.spgc-btn-text.spgc-is-loading::after {
	border-color: rgba(44, 42, 120, 0.3);
	border-top-color: var(--navy, #2C2A78);
}
@keyframes spgc-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Success state (toggle via JS: add "spgc-is-success") ---------- */
.spgc-btn.spgc-is-success {
	background: #1e8e5a;
	border-color: #1e8e5a;
	color: #fff;
}

/* ---------- Icon buttons: Search, Account, Cart, Wishlist, Menu, Close, Filter, Sort ---------- */
.spgc-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--line, rgba(23, 22, 46, 0.10));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	position: relative;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.spgc-icon-btn:hover { border-color: var(--navy, #2C2A78); background: var(--grey-bg, #f6f6f9); }
.spgc-icon-btn:active { background: var(--grey-alt, #eef0f5); }
.spgc-icon-btn:disabled { opacity: 0.4; pointer-events: none; }
.spgc-icon-btn svg { width: 16px; height: 16px; stroke: var(--ink, #17162e); }
.spgc-icon-btn .spgc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--red, #E31E2A);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Quantity stepper: Quantity increase / decrease ---------- */
.spgc-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line, rgba(23, 22, 46, 0.10));
	border-radius: 6px;
	overflow: hidden;
}
.spgc-quantity-selector input {
	width: 48px;
	height: 32px;
	border: none;
	text-align: center;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--ink, #17162e);
	-moz-appearance: textfield;
}
.spgc-quantity-selector input::-webkit-outer-spin-button,
.spgc-quantity-selector input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.spgc-qty-btn {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--navy, #2C2A78);
	cursor: pointer;
	transition: background 0.15s ease;
}
.spgc-qty-btn:hover { background: var(--grey-bg, #f6f6f9); }
.spgc-qty-btn:disabled { opacity: 0.35; pointer-events: none; }