/**
 * Sistem tombol global - Serayu Digital
 *
 * Semua tombol pada tema memakai kelas di bawah agar konsisten.
 * Metrik dasar diambil dari tombol "Lihat Demo" di halaman detail produk:
 * padding 10px 20px, radius 7px, weight 600, font-size 0.94em.
 */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 7px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.94em;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.sd-btn--primary {
	background: #0166FF;
	color: #fff;
	box-shadow: 0 4px 12px rgba(1, 102, 255, 0.25);
}
.sd-btn--primary:hover {
	background: #0052cc;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 7px 18px rgba(1, 102, 255, 0.32);
}

.sd-btn--ghost {
	background: #f8f9fa;
	color: #212529;
	border-color: #e9ecef;
}
.sd-btn--ghost:hover {
	background: #fff;
	color: #0166FF;
	border-color: #0166FF;
	transform: translateY(-2px);
}

.sd-btn--wa {
	background: #25D366;
	color: #fff;
	box-shadow: 0 4px 12px rgba(37, 211, 102, 0.28);
}
.sd-btn--wa:hover {
	background: #1eb855;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 7px 18px rgba(37, 211, 102, 0.36);
}
.sd-btn__icon {
	flex: 0 0 auto;
	display: block;
}

.sd-btn--light {
	background: #fff;
	color: #0166FF;
	border-color: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.sd-btn--light:hover {
	background: #fff;
	color: #0052cc;
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
}

.sd-btn--block {
	width: 100%;
}

/* Filter / chip */
.sd-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 7px;
	border: 1px solid #e9ecef;
	background: #f8f9fa;
	color: #212529;
	font-weight: 600;
	font-size: 0.94em;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.sd-filter:hover {
	background: #fff;
	color: #0166FF;
	border-color: #0166FF;
}
.sd-filter.is-active {
	background: #0166FF;
	color: #fff;
	border-color: #0166FF;
}
.sd-filter.is-active:hover {
	background: #0052cc;
	color: #fff;
}

/* Dropdown filter */
.sd-select {
	padding: 10px 20px;
	border-radius: 7px;
	border: 1px solid #e9ecef;
	background: #fff;
	color: #212529;
	font-weight: 600;
	font-size: 0.94em;
	cursor: pointer;
}

/* Blok CTA promosi WhatsApp */
.sd-wa {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed #e9ecef;
}
.sd-wa__text {
	margin: 0 0 10px;
	color: #6c757d;
	font-size: 0.9em;
	line-height: 1.5;
	text-align: center;
}

/* Pagination */
.pagination .page-numbers,
.pagination a,
.pagination span,
.nav-links .page-numbers,
.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	margin: 0 4px;
	border-radius: 7px;
	border: 1px solid #e9ecef;
	background: #f8f9fa;
	color: #212529;
	font-weight: 600;
	font-size: 0.94em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pagination a:hover,
.pagination .page-numbers:hover,
.nav-links a:hover,
.nav-links .page-numbers:hover {
	background: #fff;
	color: #0166FF;
	border-color: #0166FF;
}
.pagination .current,
.pagination .page-numbers.current,
.nav-links .current,
.nav-links .page-numbers.current {
	background: #0166FF;
	color: #fff;
	border-color: #0166FF;
}