/**
 * HỆ NÚT DÙNG CHUNG. Vùng chạm tối thiểu 44px (mục U/K — touch target).
 *
 * UI Consistency 2027 bổ sung:
 *   - trạng thái disabled cho `.alo-btn` (trước đây chỉ Checkout tự lo);
 *   - `.alo-icon-btn` — nút CHỈ CÓ ICON dùng chung. Trước pass này mỗi bề
 *     mặt tự viết lại: đóng cart drawer (viền, bo 14px), đóng sheet lọc
 *     (viền, bo tròn 50%), đóng trình xem bảng (viền, bo 8px), đóng menu và
 *     đóng tìm kiếm (không viền, nền trong suốt). Cùng một hành động, năm
 *     hình dạng. Nay tất cả dùng primitive này, component chỉ còn lo vị trí.
 */
.alo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--alo-radius-sm);
	border: 2px solid transparent;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.alo-btn--primary {
	background: var(--alo-color-primary);
	color: #fff;
}
.alo-btn--primary:hover { background: var(--alo-color-primary-2); }

/**
 * #3 · 11/09/2026 — NÚT PHỤ VỀ TRUNG TÍNH.
 *
 * Đo trên trang chủ trước pass này: 4 nút nền xanh đặc + 3 nút viền xanh
 * cùng một trang. Nặng hơn, CÙNG NHÃN "Gọi ALÔ" render hai kiểu khác nhau —
 * một chỗ nền xanh đặc, một chỗ viền xám (`.alo-hero__call` tự ghi đè). Tức
 * kiểu trung tính đã có sẵn trong theme, chỉ chưa được áp nhất quán.
 *
 * Quy tắc chốt: MỖI VÙNG QUYẾT ĐỊNH CHỈ MỘT nút đặc màu thương hiệu; nút
 * phụ dùng viền trung tính. Nút chính nhờ vậy nổi hơn hẳn vì hết thứ cạnh
 * tranh — đó mới là mục đích, không phải "bớt màu cho đẹp".
 *
 * Hover mới dùng brand: lúc đó nó là nút DUY NHẤT đang được trỏ tới nên màu
 * thương hiệu mang đúng nghĩa "đây là thứ bạn sắp bấm".
 */
.alo-btn--outline {
	background: transparent;
	border-color: var(--alo-color-field-border);
	color: var(--alo-color-text);
}
.alo-btn--outline:hover {
	border-color: var(--alo-color-primary);
	color: var(--alo-color-primary-2);
	background: var(--alo-color-primary-soft);
}


/**
 * Biến thể LINK — hành động cấp ba.
 *
 * UX review 08/09/2026: site đang chỉ có `--primary` và `--outline`, nên mọi
 * lối đi phụ ("Tiếp tục mua", "Xem giỏ hàng" trong mini cart) đều phải mượn
 * `--outline` và trông ngang hàng với hành động chính. Một màn hình vì thế có
 * hai nút to như nhau cho hai việc khác hẳn tầm quan trọng.
 *
 * Biến thể này giữ đúng vùng chạm của `.alo-btn` (không thu nhỏ mục tiêu bấm
 * trên mobile), chỉ bỏ nền và viền.
 */
.alo-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--alo-color-text-muted);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.alo-btn--link:hover {
	background: transparent;
	color: var(--alo-color-text);
}

.alo-btn:disabled,
.alo-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: default;
	pointer-events: none;
}

/* =====================================================================
   NÚT ICON DÙNG CHUNG
   ---------------------------------------------------------------------
   Mặc định = hành động ĐÓNG một bề mặt (không xoá dữ liệu): ô 44px, viền
   nhạt, icon mờ; hover chuyển sang xanh hệ thống.

   Hai modifier tách bạch nghĩa, đúng yêu cầu "Close / Remove / Clear phải
   khác nhau":
     --ghost  : xoá nội dung ô nhập (không viền, chìm trong ô);
     --danger : xoá dữ liệu (hover chuyển đỏ hệ thống).
   ===================================================================== */
.alo-icon-btn {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: var(--alo-control-size);
	height: var(--alo-control-size);
	padding: 0;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-md);
	background: var(--alo-color-surface);
	color: var(--alo-color-text-muted);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.alo-icon-btn:hover {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-primary);
}
.alo-icon-btn:disabled,
.alo-icon-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: default;
	pointer-events: none;
}

.alo-icon-btn--ghost {
	border-color: transparent;
	background: transparent;
}
.alo-icon-btn--ghost:hover {
	border-color: transparent;
	background: var(--alo-color-primary-soft);
}

.alo-icon-btn--danger:hover,
.alo-icon-btn--danger:focus-visible {
	border-color: var(--alo-color-danger-border);
	background: var(--alo-color-danger-soft);
	color: var(--alo-color-danger);
}

/**
 * Ô nhỏ hơn cho bề mặt dày đặc (dòng giỏ hàng, toast). Vùng chạm vẫn đủ
 * 44px nhờ lớp ::before vô hình — KHÔNG thu nhỏ điểm chạm thật.
 */
.alo-icon-btn--sm {
	position: relative;
	width: 38px;
	height: 38px;
}
.alo-icon-btn--sm::before {
	content: "";
	position: absolute;
	inset: -3px;
}