/**
 * Button component.
 *
 * Extends Bootstrap 5 .btn with brand tokens.
 * Does not duplicate Bootstrap's base .btn styles.
 * Adds brand-primary and brand-secondary variants,
 * WhatsApp variant, and icon-only square variant.
 *
 * Minimum height 44px enforced for WCAG 2.5.5.
 *
 * @package PackagingCommerce
 */

/* ── Base override: apply brand radius and transition ──────────────── */

.btn {
	min-height: 44px;
	border-radius: var(--brand-radius-md);
	font-family: var(--brand-font-body);
	font-weight: var(--brand-weight-semibold);
	font-size: var(--brand-text-sm);
	line-height: var(--brand-leading-snug);
	letter-spacing: 0;
	transition:
		background-color var(--brand-transition-fast),
		border-color var(--brand-transition-fast),
		color var(--brand-transition-fast),
		box-shadow var(--brand-transition-fast);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--brand-space-2);
	/*
	 * Arabic button labels should read on one line at their normal
	 * container width; only a genuinely long label (longer than the
	 * button can ever reasonably be) should wrap rather than overflow.
	 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Brand primary ─────────────────────────────────────────────────── */

.btn-brand-primary {
	background-color: var(--brand-color-primary);
	border-color:     var(--brand-color-primary);
	color:            #fff;
}

.btn-brand-primary:hover,
.btn-brand-primary:focus-visible {
	background-color: var(--brand-color-primary-dark);
	border-color:     var(--brand-color-primary-dark);
	color:            #fff;
}

/* ── Brand secondary (outlined) ────────────────────────────────────── */

.btn-brand-secondary {
	background-color: transparent;
	border-color:     var(--brand-color-primary);
	color:            var(--brand-color-primary);
}

.btn-brand-secondary:hover,
.btn-brand-secondary:focus-visible {
	background-color: var(--brand-color-primary-soft);
	border-color:     var(--brand-color-primary-dark);
	color:            var(--brand-color-primary-dark);
}

/* ── WhatsApp CTA ──────────────────────────────────────────────────── */

.btn-whatsapp {
	background-color: var(--brand-color-whatsapp);
	border-color:     var(--brand-color-whatsapp);
	color:            #fff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
	background-color: var(--brand-color-whatsapp-dark);
	border-color:     var(--brand-color-whatsapp-dark);
	color:            #fff;
}

/* ── Icon-only square ──────────────────────────────────────────────── */

.btn-icon {
	width:  44px;
	height: 44px;
	padding: 0;
	border-radius: var(--brand-radius-md);
}

/* ── Size modifiers ────────────────────────────────────────────────── */

.btn-sm {
	min-height:    36px;
	padding-block: var(--brand-space-1);
	font-size:     var(--brand-text-xs);
}

.btn-lg {
	min-height:    52px;
	padding-block: var(--brand-space-3);
	font-size:     var(--brand-text-md);
}