/**
 * Intrinsic Blue — Buttons & Form Controls
 * Reusable across shop, product, cart, checkout templates.
 */

/* ---------- Buttons ---------- */
.ib-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce-page a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ib-space-2);
	font-family: var(--ib-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 13px 28px;
	border-radius: var(--ib-radius-md);
	border: none;
	cursor: pointer;
	transition: transform var(--ib-transition-fast), box-shadow var(--ib-transition-fast), opacity var(--ib-transition-fast);
	text-decoration: none;
	white-space: nowrap;
}

/* Primary — gradient fill (e.g. "Add to Cart", "Complete Cosmic Order") */
.ib-btn--primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: linear-gradient(135deg, var(--ib-accent-start) 0%, var(--ib-accent-end) 100%);
	color: var(--ib-text-on-accent);
	box-shadow: var(--ib-shadow-button);
}

.ib-btn--primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #place_order:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(106, 99, 241, 0.45);
	color: var(--ib-text-on-accent);
}

/* Compact "+ Add" button used on product cards */
.ib-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
	border-radius: var(--ib-radius-sm);
}

/* Outline — used for "Load More Products", "Track Order Alignment" */
.ib-btn--outline {
	background: transparent;
	color: var(--ib-accent-end);
	border: 1.5px solid var(--ib-accent-solid);
	box-shadow: none;
}

.ib-btn--outline:hover {
	background: rgba(106, 99, 241, 0.1);
	color: var(--ib-text-primary);
}

.ib-btn--full {
	width: 100%;
}

.ib-btn:disabled,
.ib-btn.is-loading {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

/* ---------- Form Controls ---------- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select,
.ib-input {
	font-family: var(--ib-font-body);
	background-color: var(--ib-bg-input);
	border: 1px solid var(--ib-border-subtle);
	border-radius: var(--ib-radius-sm);
	color: var(--ib-text-primary);
	padding: 12px 16px;
	font-size: 14px;
	width: 100%;
	transition: border-color var(--ib-transition-fast);
}

.woocommerce input[type="text"]::placeholder,
.woocommerce input[type="email"]::placeholder,
.woocommerce textarea::placeholder,
.ib-input::placeholder {
	color: var(--ib-text-muted);
}

.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.ib-input:focus {
	outline: none;
	border-color: var(--ib-border-focus);
}

.ib-field-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--ib-text-secondary);
	margin-bottom: var(--ib-space-2);
}

/* Quantity stepper (- 1 +) used on product detail, cart */
.ib-qty-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ib-border-subtle);
	border-radius: var(--ib-radius-sm);
	overflow: hidden;
}

.ib-qty-stepper button {
	background: transparent;
	border: none;
	color: var(--ib-text-primary);
	width: 36px;
	height: 36px;
	font-size: 16px;
	cursor: pointer;
}

.ib-qty-stepper button:hover {
	background: var(--ib-bg-surface-alt);
}

.ib-qty-stepper input[type="number"] {
	width: 44px;
	text-align: center;
	border: none;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
}

.ib-qty-stepper input[type="number"]::-webkit-inner-spin-button,
.ib-qty-stepper input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Pill-style toggle/filter buttons (category filters, delivery method radio cards) */
.ib-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: var(--ib-radius-pill);
	background: var(--ib-bg-surface);
	color: var(--ib-text-secondary);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all var(--ib-transition-fast);
}

.ib-pill:hover {
	color: var(--ib-text-primary);
}

.ib-pill.is-active {
	background: var(--ib-accent-solid);
	color: var(--ib-text-on-accent);
}